How can I adjust the aspect ratio of images on my blog module?

[LucieGuilbault_1]

Theme : Chromium 4.0

Store URL : https://ciklet-cc.myshopify.com/

Hi,

I have a blog module that displays the latest blog articles on my homepage. How can I ensure that each featured image has the same dimensions/aspect ratio? When I modify the properties of the image’s parent (div), it doesn’t affect the image itself.

Thanks in advance,

Lucie

[Dan-From-Ryviu]

Did you check in your Online store > Themes > Customize > Blogs if it has the option to set the ratio of the featured images?

[LucieGuilbault_1]

@Dan-From-Ryviu Unfortunately, the theme doesn’t provide the option. That’s why I’m looking for a solution with CSS potentially ?

Thanks for your help,

Lucie

[BSS-Commerce]

Hi @LucieGuilbault_1 ,

#shopify-section-template--19293558997328__1602815780616 .featured_blog__item .featured_blog__item-image span.image__style {
    padding-top: 0!important;
    height: 300px;
}

#shopify-section-template--19293558997328__1602815780616 .featured_blog__item .featured_blog__item-image span.image__style img {
    object-fit: cover;
}

I’m setting the default height to 300px, you can adjust it as you like, object-fit: cover will not break the image when resizing the height.
Result:

Hope it works @LucieGuilbault_1

[LucieGuilbault_1]

Hi,

@BSS-Commerce Thank you very much, it worked perfectly. I have had the same issue actually on a section located slightly above that displays my collections. How can I please make sure the images are the same aspect ratio please?

Thanks

URL : https://ciklet-cc.myshopify.com/

[BSS-Commerce]

Hey @LucieGuilbault_1 ,

Insert this CSS snippet into your CSS file:

#shopify-section-template--19293558997328__57857a97-8eda-4de0-97f1-30181db1baaf .card_section-figure span.image__style {
    padding-top: 0!important;
    height: 180px;
}

#shopify-section-template--19293558997328__57857a97-8eda-4de0-97f1-30181db1baaf .card_section-figure span.image__style img {
    object-fit: cover;
}

Result:


I hope it works!