Свойство CSS max-width
Используйте свойство CSS max-width для задания максимальной ширины области содержимого элемента. Примеры и значения свойства.
Свойство CSS max-width задаёт максимальную ширину, которой может достичь элемент. Элемент может быть уже этого значения, но никогда не станет шире — независимо от объёма содержимого и размеров контейнера.
Именно поэтому max-width является краеугольным камнем адаптивных макетов: вместо фиксированной ширины элемент свободно сужается на маленьких экранах и ограничивается на больших.
Взаимодействие max-width и width
Удобно рассматривать три свойства в связке:
max-widthне позволяет используемому значениюwidthпревышать указанное значение. Еслиwidthоказывается большеmax-width, элемент уменьшается доmax-width.min-widthне позволяет элементу быть меньше своего значения и выигрывает при любом конфликте —min-widthперекрываетmax-width. Еслиmin-widthбольшеmax-width, используетсяmin-width.
Короче говоря, порядок приоритетов таков: min-width важнее max-width, а max-width важнее width.
Распространённый паттерн — «центрированная колонка контента», которая заполняет узкие viewport'ы, но перестаёт расширяться по достижении комфортной ширины для чтения:
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}На смартфоне контейнер занимает всю ширину; при ширине экрана свыше 1200px он остаётся на 1200px, а внешние отступы auto держат его по центру.
| Начальное значение | none |
|---|---|
| Применяется к | Всем элементам, кроме строковых незамещаемых элементов, строк таблицы и групп строк. |
| Наследуется | Нет. |
| Анимируется | Да. Ширина анимируема. |
| Версия | CSS2 |
| DOM Syntax | object.style.maxWidth = "500px"; |
Синтаксис
Синтаксис свойства CSS max-width
max-width: none | length | percentage | initial | inherit;Значение percentage вычисляется относительно ширины содержащего блока элемента. Значение length (например, px, em, rem, ch) задаёт абсолютный или относительный фиксированный предел. Значение по умолчанию — none — означает «без максимума».
Пример свойства max-width:
Пример CSS max-width с значением %
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
max-width: 50%;
background-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Max-width property example</h2>
<div>The max-width of this text is defined as 50%.</div>
</body>
</html>Результат
Пример свойства max-width со значениями "px" и "em":
Пример CSS max-width со значениями px и em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
max-width: 250px;
background-color: #8ebf42;
}
p {
max-width: 20em;
background-color: #ccc;
color: #fff;
}
</style>
</head>
<body>
<h2>Max-width property example</h2>
<div>The max-width of this div element is defined as 250px.</div>
<p>The max-width of this paragraph is defined as 20em.</p>
</body>
</html>Адаптивные изображения с max-width
Классическое применение max-width — масштабирование изображений на маленьких экранах без превышения их естественного размера:
img {
max-width: 100%;
height: auto;
}max-width: 100% позволяет изображению сжиматься, чтобы вписаться в узкий контейнер, а height: auto сохраняет соотношение сторон. Поскольку фиксированной width нет, изображение никогда не увеличивается сверх своего исходного разрешения.
max-width и box-sizing
По умолчанию (box-sizing: content-box) max-width ограничивает только область содержимого — padding и border прибавляются сверху, поэтому видимый блок может оказаться шире max-width. Чтобы max-width включал padding и border, установите box-sizing: border-box:
.card {
max-width: 400px;
padding: 20px;
box-sizing: border-box; /* total rendered width never exceeds 400px */
}Значения
| Значение | Описание |
|---|---|
none | Максимальная ширина не задана. Это значение по умолчанию. |
length | Фиксированная максимальная ширина в px, em, rem, ch и т. д. Отрицательные значения недопустимы. |
% | Максимальная ширина как процент от ширины содержащего блока. |
initial | Устанавливает свойство в значение по умолчанию (none). |
inherit | Наследует значение от родительского элемента. |
Связанные свойства
min-width— задаёт нижний предел; перекрываетmax-width.width— предпочтительная ширина, ограниченнаяmax-width.max-height/min-height— вертикальные аналоги.