CSS для адаптивного контейнера с заданным соотношением сторон

Введение

В этом практическом занятии мы научимся создавать контейнер с адаптивной шириной и высотой с заданным соотношением сторон с использованием CSS. Вместе с тем, мы познакомим вас с пользовательским свойством --aspect-ratio и с использованием функции calc() для вычисления высоты контейнера. Также вы узнаете, как использовать свойство object-fit: cover для дочернего элемента, чтобы сохранить соотношение сторон. В конце практического занятия у вас будет лучше понимание того, как создавать на веб-страницах визуально привлекательные и адаптивные контейнеры.

Skills Graph

Соотношение сторон

В ВМ уже предоставлены файлы index.html и style.css.

В этом коде создается контейнер с адаптивной шириной и высотой с заданным соотношением сторон с использованием пользовательских свойств CSS и функции calc(). Следуйте шагам ниже, чтобы добиться этого:

1. Определите желаемое соотношение сторон с использованием пользовательского свойства CSS --aspect-ratio.
2. Установите для элемента-контейнера свойство position в relative, а свойство height в 0.
3. Вычислите высоту элемента-контейнера с использованием функции calc() и пользовательского свойства --aspect-ratio, и установите ее в качестве свойства padding-bottom.
4. Установите для непосредственного дочернего элемента контейнера position: absolute, top: 0, left: 0, width: 100% и height: 100%.
5. Сохраните соотношение сторон дочернего элемента, установив для него свойство object-fit в cover.

Используйте следующий HTML и CSS код для создания контейнера:

<div class="container">
  <img src="https://picsum.photos/id/119/800/450" />
</div>

.container {
  --aspect-ratio: 16/9;
  position: relative;
  height: 0;
  padding-bottom: calc(100% / var(--aspect-ratio));
}

.container > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по соотношению сторон. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.