I have a large image whose width in CSS is set by width: 1024px and also controlled by a max-width: 100%. The height is also specified in px in CSS so as to allow the browser to render the page correctly first time without any re-rendering. That does seem to me to be very sensible. But what do I do if the max-width turns out to be less than 1024, as I’m told that the height, being specified in px, will cause the image to be displayed with a distorted aspect ratio? If I set the height: auto, I’m assuming that will fix the problem but I’m also assuming that then there will be a re-rendering. Is that correct? If so, is there some way out of this?
I had never heard of aspect-ratio in modern CSS when I posted the article, but now I am using A Howarth’s solution (see the first comment replying to the question posted), that of specifying the "aspect-ratio" in the CSS, instead of specifying the "height" explicitly. I am hoping that this is the perfect solution, but testing has not yet been completed. Many thanks to A Howarth for this post, which I am hoping is indeed the answer, and an ideal one too, seeing as I really wanted to avoid placing "width" and "height" attributes in the (X)HTML because I’m trying hard to keep all presentation information hidden and confined to the CSS.
The plan gives the correct visual results, but I have (i) not checked what happens if the width is constrained to be less than the specified one, and (ii) I have not checked for layout shift. There is a max-width constraint in the CSS, which could cause a reduction in the width, in which case I hope now that the aspect ratio will always remain correct even when the current width is reduced.