Kozack
@Kozack
WordPress guru

Как правильно вставлять адаптивные изображения?

Итак, есть сайт под управлением WordPress. На нем есть посты. В посты, в текст вставляются изображения. Изображения могут быть практически любых размеров.

Контейнер с текстом изменяет свои размеры в зависимости от формфактора клиента. Чтобы изображения не вылезали из него, и сохраняли пропорции:
img {
  max-width:100%;
  height:auto;
}


Но проблема вот в чем. Пока картинка не загрузилась её высота в браузере 0px;
5cd9236a70c7e607831833.png

Какие стили нужно задать для изображения, чтобы
  1. Картинка была адаптивна
  2. Сохраняла пропорции
  3. Не схлопывалась до нулевой высоты


Демонстрация (советую в отладчите включить "Slow 3g")
  • Вопрос задан
  • 108 просмотров
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Вам в любом случае нужно знать размеры картинки. Это можно узнать с помощью php на сервере. Либо для использования в атрибутах, что вам не подходит, либо так как опишу ниже.

Делаем обертку для картинок:

<div class="img-placeholder-responsive">
  <div class="img-placeholder-responsive__box">
    <img src="" alt="">
  </div>
</div>


.img-placeholder-responsive {
  &__box {
    position: relative;
    width: 100%;
    height: 0;
    box-sizing: border-box;
    padding-bottom: percentage(3/4); // default aspect ratio

    // Можем этот плесхолдер стилизовать как-то, пока картинка не загружена
    background: gray;
    // Можем надпись добавить
    &::before {
      position: absolute;
      content: 'Картинка загружается...';
    }

    > img {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
    }
  }
}


Здесь использован вложенный блок, а не псевдоэлемент для распорки, так как нам нужно передавать aspect из php.

Используем:

<?php
// Получаем размер картинки
$width = getImageSize();
$height = getImageSize();
?>
<!-- Вставляем в разметку -->
<div class="img-placeholder-responsive">
  <div class="img-placeholder-responsive__box"
       style="padding-bottom: <?= $height / $width * 100 ?>%"
  >
    <img src="" alt="">
  </div>
</div>


Наслаждаемся результатом!

PS. Если у вас соотношение сторон изображений величина постоянная для всех, то от получения размеров и вставки их в разметку можно отказаться, и задать дефолтный aspect в css (в примере есть).
PPS. Если aspect различается незначительно, можно его также вшить в css и задать картинке стиль object-fit: cover (или contain)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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