Dynamically resize multiple images to fit container

[nagumi]

I have icons at the bottom of every product page. What I'd like is to have them dynamically resize to fit the container so they all fit on one line. Different products have different images (and different numbers of images.

Any ideas on how to do this? Site is www.gumpel.co.il

[KetanKumar · Accepted solution]

@nagumi 

Sorry you are facing this issue, it would be my pleasure to help you.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

.et_pb_blurb_description img {
    max-inline-size: 100% !important;
    width: 20%;
    object-fit: contain;
    padding: 8px;
}

[nagumi]

Kumar,

Thank you for the code! It does make the images resize dynamically, but they are still in two lines. How can I make all 7 images appear on one line, and 5 images for other products?

[nagumi]

I tried to change the max size to "14%" (100/7) to fit all 7 and it works! Thank you so much Kumar!

One problem: for other products which have less icons (such as https://www.gumpel.co.il/products/evapo-rust-liquid) it still resizes them as if there's 7 icons.

Maybe the best way is to set up a snippet which shows the icons depending on which ones I select?

For example, in the code for product A I put "include icons: gloves, msds, ecofriendly, madeinamerica" and it shows those 4 and dynamically resizes for 4 icons.

[KetanKumar]

@nagumi 

great thanks for update 

can you please change value 20% to as you like

[Lisabete]

Hi can you help me

[KetanKumar]

@Lisabete 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[LitExtension]

Hi @nagumi, 

Please follow the steps:

- Step 1: You need to add all the images with the a tag around it, it's very important for the CSS to sync all. https://i.imgur.com/LJtl9Jf.png

- Step 2: Add CSS for the outer div: https://i.imgur.com/CVjqm00.png

Code: width: 100%;display: flex;

- Step 3: Add CSS for a tag: https://i.imgur.com/bpypOP2.png

Code: width: 100%;

- Step 4: Add CSS for img tag:https://i.imgur.com/ylMeU9R.png

Code: width: 100%;

If you do everything right, it will show like this: https://i.imgur.com/cCVsZ65.png

Hope it helps!