CODEWITHSUNDEEP
htmlcssimageresponsive
Sam
Sam

Reputation: 1461

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?

Upvotes: 2

Views: 1053

Answers (1)

Zeev Katz
Zeev Katz

Reputation: 2273

Why don't you 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%;
}

Upvotes: 4

Related Questions