Question

I’ve a simple but tricky problem. For example the wrapper width is 500px. Inside there is a image with a variable size (larger than the wrapper).

<div class="wrapper">
    <img src="image.jpg" width="1000" height="500" />
</div>

So if I set the CSS to this:

.wrapper {
    width: 500px;
}

.wrapper img {
    width: 100%;
    height: auto;
}

The image height “jumps” on site load (only on first load because of the cache). Is there a way to stop that “jumping” without set explicit the image height?

This would be a mobile-friendly site, so I change the wrapper width with @media on various screen resolutions so I can’t set the image height explicitly.

Answer 1

Remove the height attribute on the image and remove height from the css as well.