[Support request] Post Featured Images on mobile do not retain aspect ratio

[MMS]

Hi, I’m using the following code successfully to retain the aspect ratio of images on the home page/blog roll view on mobile. However, when you click into the post the ratio shown on the home page previews for the featured image is lost and shows an image that is too tall.

https://makemesustainable.com

https://imgur.com/a/99DxKnS

@media(max-width: 1024px) {
.resize-featured-image .post-image img {
height: auto;
-o-object-fit: unset;
object-fit: unset;
}

[Ying]

Hi Simon,

Try to modify your CSS to this:

@media(max-width: 1024px) {
    .featured-image img, .resize-featured-image .post-image img {
        height: auto;
        -o-object-fit: unset;
        object-fit: unset;
    }
}

[MMS]

Hi Thanks, However, the code supplied has reversed the problem. The image aspect ratio of images on the home page/blog roll view on mobile is now too tall i.e. does not maintain aspect ratio, but on individual pages is the correct ratio when viewed on mobile. Is there a way to maintain the aspect ratio of images regardless of screen size across images on the whole site?

[Ying]

There was a mistake in the CSS, I’ve edited it and removed the media query, so it applies to all devices, could you try again?

.featured-image img, .resize-featured-image .post-image img {
    height: auto;
    -o-object-fit: unset;
    object-fit: unset;
}

Let me know 🙂

[MMS]

Thanks, Almost there. The images now resize correctly for both the blog home page and individual posts. But the image height that I set to 420px in the settings for Featured Images is being overridden and is showing the full height for images. Is it possible to reduce the height?

[Elvin]

Hi Simon,

Ying’s CSS was meant to keep the aspect ratio while still letting the image occupy 100% of the width.

If you define a specific height but still want to keep it 100% of the width, that will literally break the aspect ratio because you’re basically stretching the image to fit 100% of its container while squishing or stretching it vertically with specified height.

Are you aiming for something like this? – https://share.getcloudapp.com/z8uOwjko

If so, try thiS:

.featured-image img, .resize-featured-image .post-image img {
    height: 200px;
    width: auto;
}

[Author]

Posts