@Extramezz

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

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

<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.
  • Вопрос задан
  • 1277 просмотров
Пригласить эксперта
Ответы на вопрос 2
lunpully
@lunpully
Можно сделать подложку быстро грузящуюся: то есть маленькую картинку соответствующих пропорций. Можно прозрачный 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;}


Будет работать только если у всех картинок, которые надо вывести одинаковые пропорции.
Ответ написан
@MGames
Frontend developer
Не особо вчитывался в текст вопроса, но пропорции изображениям задаются таким образом:

<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%;
}


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы