How to set fixed image ratio to product and thumbnail pictures?

Technical Q&A
1

Hello,

After spending many days on this topic, I did my best to make product photographs cover the frame of my product pages.

Let me explain: the images on my product page template do not fill the entire image area. I’d want to use a 4:3 aspect ratio and make the image fill or cover the entire area dedicated to the product image (object-fit: cover).

After days of attempting to solve the problem, I was unable to discover a solution.

Is there any way someone can help me? It would be really thoughtful of you.

Site is: https://dantesworkshop.com/

Password: skeets

Please accept my thanks in advance for your assistance and support.

Best wishes,

Vanda

2

@nekosan01 If you want to get this fixed you can contact me at paull.newton+shopifyforums@gmail.com

From the video it seems you want through styling you want crop to 4:3 any portrait image in the main gallery thumbnails on the Product Description Pages?

Looking at the T2 arm product as an example, You may need to modify your themes image rendering logic to simply service cropped&centered images in the thumbnails.

There’s a slideshow involved with the element itself gets an aspect-ratio variable rule applied directly in the style attribute of the element you have to override.

If you just style CSS an NON 4:3 aspect ratio image to 4:3 you will get undesirable squishing.

Quick fix with CSS below that you’d add to your themes css to at least make TALL image “cropped” through it’s cropped parent element, but your other images are 1.5 aspect ratio

Always backup themes and files before making changes

.sf-prod-media.media-image {
    aspect-ratio: calc(4/3);
    overflow: hidden;
}
.sf-image {
 /* use border radius to clip corners cause by absolute vertical centering method on img.lazyautosizes.lazyloaded */
    border-radius: 5px;
}
img.lazyautosizes.lazyloaded {
   /* fake vertical centering of images tall or not */
    top: -25%;
    margin-top: 25%;
}

Slideshows my wipe the overflow:hidden rule , you would add the !important declaration (overflow:hidden !important;) but you should always try to fixed the deeper issue first.

Advanced references

How to Manipulate Images with the img_url Filter https://www.shopify.com/partners/blog/img-url-filter

https://shopify.dev/api/liquid/filters/url-filters#img_url

FYI: there’s a typo frontpage in “The 4th Gen” custom content section , “Adanved manufacturing” > “Advanced manufacturing”