LabEx
ВходРегистрация

Постоянное соотношение ширины к высоте

Beginner

This tutorial is from open-source community. Access the source code

Введение

В этом практическом занятии мы изучим, как создать постоянное соотношение ширины к высоте для элементов с различной шириной. С помощью свойства padding-top на псевдо-элементе ::before мы можем обеспечить, чтобы высота элемента оставалась пропорциональной его ширине. Эта техника может быть использована для создания отзывчивых квадратов и других фигур с определенным соотношением сторон.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 97%. Он получил 100% положительных отзывов от учащихся.

Постоянное соотношение ширины к высоте

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

Этот фрагмент кода обеспечивает то, что элемент с переменной width будет сохранять пропорциональное значение height. Для этого применяется padding-top на псевдо-элементе ::before, делая height элемента равным проценту его width. Соотношение height к width можно изменить по необходимости. Например, padding-top равный 100% создаст отзывчивый квадрат с соотношением сторон 1:1. Чтобы использовать этот код, просто добавьте следующий HTML-код:

<div class="constant-width-to-height-ratio"></div>

Затем добавьте следующий CSS-код:

.constant-width-to-height-ratio {
  background: #9c27b0;
  width: 50%;
}

.constant-width-to-height-ratio::before {
  content: "";
  padding-top: 100%;
  float: left;
}

.constant-width-to-height-ratio::after {
  content: "";
  display: block;
  clear: both;
}

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

Резюме

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