Crop Image To Ratio

1 year ago

< 1 min read

Posted by:

Focus

Subscribe to newsletter

By subscribing you agree to with our Privacy Policy.

Share

To crop image based on ratio, on Elementor’s Image Widget add this CSS:

16:9 Landscape CSS


selector {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
}

selector img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 56.25%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
    object-position: center;
}



9:16 Portrait CSS

selector {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 177.77%; /* (9 / 16) * 100% */
    overflow: hidden;
}

selector img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 56.25%; /* (16 / 9) * 100% */
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
    object-position: center;
}

Read more

Troubleshoot

< 1 min read

How to Fix Favicon Not Showing on WordPress Multisite

In some cases, sub-sites on multisite is not showing the favicon. To assign favicon for each site on WordPress multisite,

Read more

PWA

4 min read

How to Publish an App with PWA for WP

Note: On PWA for WP, the icon logo and splash screen are swapped. Please test the .apk before publishing. Also,

Read more

Breakpoints

< 1 min read

Disable Zoom on Mobile Devices (native App Style)

Go to Dashboard > Elementor > Custom Code > Add New Code. This code will disable the abilty to zoom

Read more

Container

< 1 min read

Make Container Scrollable

Add this on the column’s custom CSS panel. Adjust the ‘max-height’ to your needs.

Read more

See How It Works

Create better websites, faster.

Download the Entire Library

Adaptative, neutrally designed components.

Customer Service

Focus Website

Today, July 30

Hi, there 👋

How can I help you?

Start Chat with:

We use cookie to improve your experience on our site. By using our site you consent cookies.