img высота "прыгает" с шириной: 100% на загрузке сайта

Question

У меня простая, но сложная проблема. Например, ширина обертки составляет 500 пикселей. Внутри находится изображение с переменным размером (больше, чем обертка).

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

Так что, если я установлю CSS на это:

.wrapper {
    width: 500px;
}

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

Высота изображения «скачет» при загрузке сайта (только при первой загрузке из-за кеша). Есть ли способ остановить этот «прыжок» без явного указания высоты изображения?

Этот сайт будет удобен для мобильных устройств, поэтому я изменяю ширину оболочки с @media на разных разрешениях экрана, поэтому не могу явно установить высоту изображения.

Answer 1

Вы можете обернуть ваше изображение в элемент с отступом на основе процента. Вот так:

<div style="height: 0px; padding-bottom: X%">

, где X = Height / Width * 100.

Answer 2

Удалите атрибут высоты на изображении, а также удалите высоту из CSS.

Answer 3

Старайтесь, чтобы размеры изображений указывались в процентах, а не в пикселях.