Постоянное соотношение ширины к высоте: Техники отзывчивого дизайна

Введение

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") subgraph Lab Skills css/selectors -.-> lab-35183{{"Постоянное соотношение ширины к высоте"}} css/colors -.-> lab-35183{{"Постоянное соотношение ширины к высоте"}} css/width_and_height -.-> lab-35183{{"Постоянное соотношение ширины к высоте"}} css/display_property -.-> lab-35183{{"Постоянное соотношение ширины к высоте"}} css/backgrounds -.-> lab-35183{{"Постоянное соотношение ширины к высоте"}} css/pseudo_elements -.-> lab-35183{{"Постоянное соотношение ширины к высоте"}} end

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

В ВМ уже предоставлены 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, чтобы улучшить свои навыки.