пустой блок для замены на изображение

307

25 апреля 2017, 07:03

здравствуйте, как зная параметры изображения (php getimagesize) задать div'y в котором расположено изображения, такую же высоту как будет у изображения? при том что изображение не имеет максимальной длины, а подстраивается под расширения экрана (тоесть просто max-width 100%)

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

Answer 1

Самый простой способ, встроить PHP в шаблон. Простейший пример:

<div style="height:<?php echo $imageHeight; ?>">
. . .
</div>

Если используете AJAX, принцип тот же, только высота будет задаваться уже JavaScript'ом.

Answer 2

Есть старый способ сделать распорку с padding-bottom, работает, потому, что проценты padding-bottom это проценты от ширины элемента, а не от высоты контейнера.

.img-container { 
position: relative; 
width: 100%; 
background: red; 
} 
.img-place { 
width: 100%; 
height: 0; 
} 
 
.img-container img { 
  position: absolute; 
  width: 100%; 
  top: 0; 
  left: 0; 
}

<div class="img-container"> 
  <!-- считаем padding bottom как 200/640*100, вставляем любым удобным способом --> 
  <div class="img-place" style="padding-bottom: 31.25%"></div> 
  <img src="https://placehold.it/640x200" /> 
</div>