Высота блока в зависимости от ширины: высота и пропорции на CSS

Опубликовал(а): Артём Масальский

Обновлено: 27.03.2024

Высота блока в зависимости от ширины задается в различных единицах CSS: дюймах (in), пикселях (px), пунктах (pt) и т. д., а также в процентах относительно родительского блока или окна браузера. Установка значения height: auto сохраняет пропорции изображения и его содержимое. Если значение не задано, используется значение атрибута height из HTML-разметки.

Обратите внимание! Высота элемента, определенная через свойство height, учитывает внутренние и внешние отступы, а также рамку border. Если свойство box-sizing не задано, то размер внутренней области определяется исключительно значениями height и width. Однако, если значение box-sizing задано, оно определяет, какие размеры применяются к указанной области элемента.

Высота блока в зависимости от ширины, необходимо ли устанавливать?

Необязательно указывать высоту элементам на веб-странице. В большинстве случаев, высота элемента будет определяться его содержимым и свойствами CSS, такими как отступы и размеры шрифта. Однако, в некоторых ситуациях может потребоваться задать конкретную высоту для достижения желаемого визуального эффекта или для обеспечения согласованного внешнего вида элементов.

Внутренний размер по умолчанию

Элементы HTML обычно имеют размеры по умолчанию, которые определяются до применения каких-либо правил CSS. Например, изображения имеют внутренние размеры, определенные в файле изображения. Если вы разместите изображение на странице без изменения его размера через атрибуты тега <img> или CSS, оно будет отображаться с использованием этих внутренних размеров. В следующем примере мы установили рамку для изображения, чтобы вы могли увидеть его размеры файла.

img {
  border: 5px solid darkblue;
}

<img src="star.png" alt="star">

Пустой элемент <div> не имеет собственного размера. Если вы добавите такой <div> без содержимого и установите для него рамку, то увидите линию на странице, которая представляет собой границу элемента. В нашем примере эта граница растягивается на всю ширину контейнера, так как элемент блочный и не имеет высоты из-за отсутствия содержимого.

.box {
  border: 5px solid darkblue;
}

<div class="box">

</div>

Присваивание определенного размера

Размер, который явно задается элементу при помощи CSS, называется внешним размером. Если установить для <div> специфические значения width и height, то элемент будет иметь именно эти размеры, независимо от размера содержимого внутри него. Однако, если размер содержимого превысит внутреннее пространство элемента, это может вызвать переполнение.

.box {
  border: 5px solid darkblue;
  height: 150px;
  width: 200px;
}

<div class="wrapper">
  <div class="box"></div>
  <div class="box">These boxes both have a height set, this box has content in it which will need more space than the assigned height, and so we get overflow. </div>
</div>

Обратите внимание! Задавать высоту элементов с использованием конкретной длины или процентного соотношения следует делать с осторожностью из-за потенциальной проблемы перекрытия.

Использование процентного соотношения

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

.box {
  border: 5px solid darkblue;
  width: 50%;
}

<div class="box">
  I have a percentage width.
</div>

Margins и paddings в процентах

При использовании процентов для установки отступов (margins) и внутренних полей (padding), можно заметить необычное поведение. В примере ниже мы имеем блок, где внутреннему блоку присвоены отступы (margin) и внутренние поля (padding) по 10% каждое. Интересно, что отступы и внутренние поля сверху и снизу имеют такой же размер, как отступы слева и справа.

.box {
  border: 5px solid darkblue;
  width: 300px;
  margin: 10%;
  padding: 10%;
}

<div class="box">
  I have margin and padding set to 10% on all sides.
</div>

При использовании отступов (margins) и внутренних полей (padding), заданных в процентах, их значение рассчитывается на основе ширины блока в горизонтальном направлении. В нашем примере все отступы и внутренние поля составляют 10% от ширины блока. Таким образом, у вас будут одинаковые отступы и внутренние поля по всему блоку. Этот момент стоит учитывать при использовании процентов.

Высота блока в зависимости от ширины — минимальные и максимальные размеры

CSS позволяет задавать элементу минимальную высоту через свойство min-height. Такой блок всегда будет иметь минимальную указанную высоту, пока контент в нем не превысит это значение.

В приведенном ниже примере два блока имеют минимальную высоту в 150 пикселей. Блок слева всегда будет иметь высоту 150 пикселей, даже если в нем нет текста. Блок справа содержит контент, требующий больше места, чем минимальная высота, поэтому он увеличивается, чтобы вместить весь контент.

.box {
  border: 5px solid darkblue;
  min-height: 150px;
  width: 200px;
}

<div class="wrapper">
  <div class="box"></div>
  <div class="box">These boxes both have a min-height set, this box has content in it which will need more space than the assigned height, and so it grows from the minimum.</div>
</div>

Использование max-width в CSS помогает контролировать размер изображений, предотвращая их растягивание и пикселизацию. Это особенно полезно при изменении размеров изображений в зависимости от ширины контейнера.

В примере ниже приведено использование одного и того же изображения трижды. Первое изображение имеет width: 100% и растягивается до ширины контейнера. Второе изображение имеет max-width: 100% и не растягивается, сохраняя свои пропорции. Третье изображение также имеет max-width: 100% и уменьшается, чтобы поместиться в контейнер.

.box {
  width: 200px;
}
.minibox {
  width: 50px;
}
.width {
  width: 100%;
}
.max {
  max-width: 100%;
}

<div class="wrapper">
  <div class="box"><img src="star.png" alt="star" class="width"></div>
  <div class="box"><img src="star.png" alt="star" class="max"></div>
  <div class="minibox"><img src="star.png" alt="star" class="max"></div>
</div>

Использование метода адаптивных изображений помогает им подстраиваться под размер экрана. Однако не следует загружать слишком большие изображения и уменьшать их в браузере, чтобы избежать замедления загрузки и повышения расхода трафика.

Единицы вьюпорта

Вьюпорт — это видимая область страницы в браузере. В CSS есть единицы измерения, связанные с размером вьюпорта: vw (ширина) и vh (высота). Используя их, можно регулировать размер элементов относительно размера видимой области браузера.

.box {
  border: 5px solid darkblue;
  width: 20vw;
  height: 20vh;
  font-size: 10vh;
}

<div class="box">
  A
</div>

Изменение размеров vh и vw меняет размер блока или текста в зависимости от размера видимой области браузера. Это может быть полезно, например, для создания раздела, который будет отображаться перед остальным контентом на странице.

Высота блока в зависимости от ширины, итоговое решение

Этот урок предоставил вам обзор решения основных проблем, с которыми вы можете столкнуться при определении размеров объектов в веб-разработке. Понимание этих концепций является ключевым для успешного использования CSS-макетирования, где изменение размеров играет важную роль. Это особенно важно при создании адаптивных и отзывчивых дизайнов, которые должны хорошо выглядеть на различных устройствах и экранах. Прежде чем двигаться дальше и изучать более сложные методы макетирования, важно уверенно владеть этими основами.

Кстати! Одним из увлекательных нововведений в CSS является возможность использования меньшего количества изображений в веб-дизайне и создание различных фигур прямо в коде. В новой статье на нашем портал приведем примеры, как мы используем CSS в создании геометрических фигур.

Не пропустите эти статьи

Как сделать адаптивное видео YouTube на CSS

Рассмотрим несколько способов, как сделать адаптивное видео YouTube на CSS и поместить на сайт таким…

Блочная модель в CSS: высота блока и пропорции

Блочная модель в CSS (box model) применяется к элементам, которые рассматриваются как блоки, определяя, как…

Используем CSS в создании геометрических фигур: 13 примеров несложных форм

Одним из увлекательных нововведений в CSS является возможность использования меньшего количества изображений в веб-дизайне и…

Как сделать прелоадер: пошаговый способ добавления Preloader для сайта

Мы покажем, как сделать прелоадер в виде анимации с появлением на экране во время загрузки. …