How can I fill square thumbnails with photos without cropping?

[smander]

Wondering how to get the photos to fill the square thumbnails without cropping the image? I’ve seen some Shopify sites with images filling the square thumbnail but still previewing the portrait image when clicked on it.

[Made4uo-Ribe]

Hi @smander

The width size of the thumbnail is auto. But if you like to fill them with the frame it should be 100%. And it would be look like this.

This it he code I used.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.thumbnail--narrow img {
    width: 100% !important;
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[ZenoPageBuilder]

Hello @smander

In Shopify Admin, go to Edit theme code, open file base.css and add this code at the bottom

.thumbnail--narrow img {
    position: absolute !important;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

The result

Hope that helps!

[smander]

That looks perfect! I’ve added the code to base.css but it’s not working, any ideas?

[ZenoPageBuilder]

Please replace the above code with this one

.thumbnail--narrow img {
    position: absolute !important;
    width: 100% !important;
    height: auto !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}