x
 
Евгений Арутюнов
17 мая 2018
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Тег <img> умеет масштабировать картинки пропорционально — заданная в процентах ширина автоматически даёт соответствующую высоту. Мне именно такая резиновость как раз нужна.

Но высота блока с картинкой влияет и на высоту соседнего блока (как флекс-элементы это умеют делать), да и в самом этом блоке поверх картинки размещаются тексты, которые здесь главные, а картинка это их фон. Если картинка отвалится или окажется неправильного размера — сломаются блоки, которые по смыслу с ней вообще не особо связаны. И ещё в процессе загрузки с медленным интернетом всё будет дёргаться.

Получается, что внешняя по отношению к этой вёрстке штука слишком сильно влияет на самочувствие макета. Есть ощущение, что это неправильно.

Как быть?


К сожалению, в ЦСС до сих пор нет нормального способа это сделать. Если хотя бы одна сторона элемента img резиновая, при загрузке раскладка будет прыгать.

Чтобы побороть это, можно воспользоваться старым хаком, зафиксировав место под картинку с помощью padding-bottom и разместив само изображение внутри абсолютом.

<!-- index.html -->
<div class="box">
  <img src="demo.png" />
</div>
/* style.css */
.box {
  position: relative;
  padding-bottom: 75%;
  /* Размеры изображения 400x300.
  300 / 400 = 0.75 → 75% */
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
Padding-bottom считается относительно ширины родителя, поэтому с помощью него можно задать пропорцию контейнера

Применим этот способ для вёрстки картинки с текстом:

<!-- index.html -->
<div class="row">
  <div class="boxWrapper">
    <div class="box">
      <img src="demo.png" />
    </div>
    <div class="caption">
      Остроумная подпись к изображению
    </div>
  </div>
  <div class="text">
    Пласт, так или иначе, неравномерен.
    Показательный пример – детройтское техно
    начинает соноропериод. Ощущение
    мономерности ритмического движения
    возникает, как правило, в условиях
    темповой стабильности, тем не менее
    процессуальное изменение ненаблюдаемо.
  </div>
</div>
/* style.css */
.row {
  display: flex;
}

.boxWrapper {
  width: 30%;
  margin-right: 1em;
}

.text {
  flex: 1
}

.box {
  border: 1px solid #000;
}
Без обёртки padding-bottom посчитатется от всей ширины родителя и пропорции сломаются
Пласт, так или иначе, неравномерен. Показательный пример – детройтское техно начинает соноропериод. Ощущение мономерности ритмического движения возникает, как правило, в условиях темповой стабильности, тем не менее процессуальное изменение ненаблюдаемо.

Теперь, если картинка по какой-то причине не загрузится, раскладка не сломается:

Пласт, так или иначе, неравномерен. Показательный пример – детройтское техно начинает соноропериод. Ощущение мономерности ритмического движения возникает, как правило, в условиях темповой стабильности, тем не менее процессуальное изменение ненаблюдаемо.
Картинка загрузилась, всё в порядке
Пласт, так или иначе, неравномерен. Показательный пример – детройтское техно начинает соноропериод. Ощущение мономерности ритмического движения возникает, как правило, в условиях темповой стабильности, тем не менее процессуальное изменение ненаблюдаемо.
Картинка не загрузилась, всё на своих местах

Если изображение выполняет функцию фона, то лучше и вставить его фоном, растянув нужным образом с помощью свойства background-size. В этом случае изображение будет подстраиваться под заданные текстом размеры и не будет влиять на раскладку:

<!-- index.html -->
<div class="container with__cover">
  Пласт, так или иначе, неравномерен.
  Показательный пример – детройтское техно
  начинает соноропериод. Ощущение
  мономерности ритмического движения
  возникает, как правило, в условиях
  темповой стабильности, тем не менее
  процессуальное изменение ненаблюдаемо.
</div>

<div class="container with__contain">
  Пласт, так или иначе, неравномерен.
  Показательный пример – детройтское техно
  начинает соноропериод. Ощущение
  мономерности ритмического движения
  возникает, как правило, в условиях
  темповой стабильности, тем не менее
  процессуальное изменение ненаблюдаемо.
</div>
/* style.css */
.container {
  background: url(demo.png) no-repeat center;
  height: 300px;
  border: 1px solid #000;
}

.container.with__cover {
  background-size: cover;
  /* Изображение растянется под обрез
  с сохранением пропорций */
}

.container.with__contain {
  background-size: contain;
  /* Изображение впишется в контейнер */
}
Пласт, так или иначе, неравномерен. Показательный пример – детройтское техно начинает соноропериод. Ощущение мономерности ритмического движения возникает, как правило, в условиях темповой стабильности, тем не менее процессуальное изменение ненаблюдаемо.
Изображение растянуто по обрез
Пласт, так или иначе, неравномерен. Показательный пример – детройтское техно начинает соноропериод. Ощущение мономерности ритмического движения возникает, как правило, в условиях темповой стабильности, тем не менее процессуальное изменение ненаблюдаемо.
Изображение вписано в прямоугольник с текстом
P. S. Это был совет о веб-разработке. Хотите знать всё о коде, тестах, фронтенд-разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор открыт. Чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Какой движок выбрать для сайта рекламного агентства? 2 Чеклист публикации сайта 2 Как объяснять разработчикам архитектуру проекта? Как улучшить сообщение о баге для разработчиков?




Недавно всплыло

1 Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1 1 Правдивость 4