Sam Sam - 1 month ago 6
CSS Question

Responsive img srcset not scaling in landscape mode

I recently built the following website. The site uses img srcset on all of the images.

During debugging, I discovered that when switching between portrait and landscape mode on the homepage, the top full width image doesn't fill the viewport like it should. If you refresh the page in landscape mode, you'll see the correct scaling.

I'm using the following CSS to make my images responsive:

img {
height: auto;
max-width: 100%;
}


It's important to note that I have two images for this. A square image is displayed when the viewport is 600px or less. Anything above 600px and the full width image is displayed. This is controled in the css with
display: block;
and
display: none;
.

I'm unable to emulate the problem via Browserstack, but can on a physical device (iPhone 6) in Safari and Chrome.

Would it help if my img tags had a width and height declared?

Answer

Why you don't use min-width?

The problem starts with the fact that you didn't define what the width of the element, but define what its max-width. In this case your image base on the original their width.


To figure it out just add min-width: 100%;

img {
    height: auto;
    min-width: 100%;
    max-width: 100%;
}