Как указать пропорции для img?

Question

[Extramezz]

Есть примерно такой код (типа несколько рядом стоящих блоков):

<div style="20%">
   <img src="image.png" alt="Изображение в адаптивном блоке" style="width: 100%">
</div>
<div style="20%">
   <img src="image2.png" alt="Изображение в адаптивном блоке" style="width: 100%">
</div>

Обе картинки имеют одинаковые размеры и отношения сторон, соответственно. К примеру, 500x300.
И все показывается нормально, пропорции картинки сохраняются, но это только после загрузки содержимого img. А вот до этого тег img по высоте занимает 0px, я хочу это поправить. Как указать высоту так, чтобы она вычислялась пропорционально?

То есть, если div будет шириной в 250px, то ширина картинки будет тоже 250, а высота 150.
если div будет шириной в 125px, то ширина картинки будет тоже 125, а высота 75.

Comments

[Lynn «Кофеман»]

Написать размер картинки в теге img атрибутами

Answer 1

[Алексей]

Можно сделать подложку быстро грузящуюся: то есть маленькую картинку соответствующих пропорций. Можно прозрачный PNG. Что то в таком роде:

<div style="20%"> <!-- Кстати тут не правильный атрибут -->
   <div class="picture">
       <img src="img/cap.png" />
       <img src="img/image.png" class="picture__object"/>
    </div>
</div>

Для .picture надо поставить {position:relative; width: 100%} в стилях. А для

.picture__object {position: absolute; z-index: 10; left: 0; top: 0;}

Будет работать только если у всех картинок, которые надо вывести одинаковые пропорции.

Comments

[Алексей]

Забыл еще одно правило

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

[Extramezz]

Алексей: Я думал об этом, но мне кажется неправильным загружать чисто белую картинку таких размеров

[Алексей]

Extramezz: Не таких размеров. А таких пропорций. Максимально малого размера.
Она увеличится до необходимого размера.

Answer 2

[Михаил Румянцев]

Не особо вчитывался в текст вопроса, но пропорции изображениям задаются таким образом:

<div class="wrapper">
    <img class="image" src="" alt="">
</div>

.wrapper {
    position: relative;
    display: block;
}

.wrapper::before {
    content: '';
    display: block;
    padding-top: 50%; // вычисляется относительно ширины родителя
}

.image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Если требуется конкретная ширина, то её нужно установить врапперу.