KhaldoonDev

@jensimmons hello, hope it is ok that I am reaching you here, didn’t know where else to reach you. So I am having an interesting dilemma with WebKit and would appreciate your input. When setting an aspect ration on an image, the aspect ratio property wouldn’t work on the image unless I give it a width of 100%. Min/max-width 100% wouldn’t work. I have tired the same problem with chrome and Firefox and couldn’t reproduce it. Both obey the aspect ratio property even with min/max-width.

Extra info: the image is inside a container with a set width. I have tested the problem with safari 15.4 and 16.2 .

Jan 30, 2023 at 2:00pmWeb
Show threadJen SimmonsJan 31, 2023

@khaldoondev One side of the image must be given a size (like 100% or 500px), and the other side of the image must be set to `auto`. Plus, you will likely need to use `object-fit` to tell the browser what to do with the image after applying `aspect-ratio` (like to crop it).

`aspect-ratio` may not be the right tool for what you are trying to do. It's really for other elements (not images). But maybe it is...

Watch this video to learn more about images & sizing. https://youtu.be/YM3KszYmn58?t=60

Improving The Page Loading Experience To Reduce Layout Shift by Jen Simmons [ IMAGE READY ]

YouTube
Show threadKhaldoonDevJan 31, 2023
@jensimmons thanks a ton for responding to my question and pointing me in the right direction! I really appreciate your time!
Show threadKhaldoonDevJan 31, 2023
@jensimmons I just had a chance to watch your talk and I must say, in my four years of web development, no one has ever explained the proper usage of the image tag as clearly as you did. Thank you for directing me to the talk and making it available. I greatly benefited from it.