Images with max-height property do not resize correctly

[arsa]

Hello,

I want to display images (landscape and portrait format) with a max-height underneath each other. In Chrome they shrink as expected when resizing the browser window smaller and enlarge when resizing the browser window bigger.

The problem:
When I use Safari (Version 14) they shrink when I resize the browser smaller but do not enlarge back when I resize the browser bigger.

How can I solve the problem? Here is the Webflow-Link:

https://preview.webflow.com/preview/responsive-images-94d6d8?utm_medium=preview_link&utm_source=designer&utm_content=responsive-images-94d6d8&preview=a625a4c07f77c2ac97863564c12aa931&workflow=preview

Thanks so much for your help!
Arne

[arsa]

Hello everyone,

does anyone know a solution for my problem?

Thanks a lot!

[mikeyevin]

Safari handles Auto sizing a bit differently than Chrome, so try giving them a defined height as well—this tends to fix a lot of the issues that I’ve ran into on Safari specifically.

[arsa]

Hey, Thanks a lot for your reply and your help. I already tried to give them a defined height, but they still don’t enlarge back when resizing the browser bigger. Not sure how I can solve the problem …

[mikeyevin]

So I took a minute to search for Safari specific fixes and it appears that the browser should do a good job of scaling images proportionally if you set a width but keep the height set to Auto.

I tried the fix in DevTools on your staging site but was still getting a similar problem where they weren’t growing accordingly—but only after they reached a certain size. The problem may have something to do with the native responsive sizing that Webflow applies to the images themselves.

Can you try disabling that by going to your image settings, hitting CMD/CTRL+Shift+O, and then deselecting the Responsive image checkbox that appears:

You may also want to try removing the set image size from the settings as well—these may be the cause of some issues. I typically will leave these set to auto and have their containers controlling the size instead.

Give those two suggestions a try and let me know how it works out

[arsa]

Hey mikeyevin, Thanks so much for your help!!! I disabled the Responsive Image checkbox and it works. I did not even know that I can show the checkbox by hitting CMD/CTRL+Shift+O. I guess I just need to pay extra attention to the file size, since Webflow won’t create multiple images depending on the browser size anymore. Thanks again and have good weekend!