0

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

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

1
  • При разрешении 2560px и выше изображение тоже будет подстраиваться под расширение?
    – labris
    24 апр 2017 в 2:01

2 ответа 2

1

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

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

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

1
  • 1
    данный способ не подходит потому что у человека резиновая длина изображения, то есть при разных масштабах экрана высота у изображения может быть обрезана потому что картинка будет подстраиватся, а блок будет оставаться той же высоты
    – turik97
    23 апр 2017 в 21:38
0

Есть старый способ сделать распорку с 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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.