max-width (свойство CSS)

Описание

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

Элемент, к которому применяется max-width , никогда не будет шире, чем указанное значение, даже если свойство width установлено как более широкое. Однако из этого правила есть исключение: если min-width указывается со значением, превышающим значение max-width , max-width контейнера будет наибольшим, что в данном случае означает, что значение min-width будет тот, который применяется.

max-width часто используется вместе с min-width для получения диапазона ширины для соответствующего элемента.

Сочетание максимальной ширины и ширины

Обратите внимание, что max-width и width не должны применяться к одному и тому же элементу с использованием одного и того же элемента, так как один переопределит другой. Если, например, ширина установлена ​​в 150 пикселей, а max-width установлена ​​в 60 пикселей, фактическая ширина элемента будет 60 пикселей, и объявление ширины станет избыточным.

Следующее правило стиля показывает, как разрешаются конфликты, когда элементу присваивается ширина и max-width с использованием одной и той же единицы измерения (в данном случае пикселей):

 .example { max-width: 60px; width: 150px; } 

В приведенном выше примере ширина элемента будет фиксированной в 60 пикселей.

Тем не менее, допустимо устанавливать max-width и width, когда значения являются различными единицами (хотя это может быть не совсем полезно, есть несколько случаев, когда это может быть использовано для хорошего эффекта).

Это правило стиля назначает max-width 160 пикселей для изображений с классом «example», а также назначает ширину 50%:

 img.example { width: 50%; max-width: 160px; height: auto; } 

Конечная ширина изображения в приведенном выше примере будет наименьшим значением.

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

Если доступное пространство превышает 160 пикселей, изображение будет расширяться до ширины 160 пикселей, но не дальше. Это гарантирует, что изображение останется разумного размера — или его правильное соотношение сторон — когда позволяет пространство.

Свойство min-width можно использовать для обратного сценария.

Если для содержимого блока требуется больше горизонтального пространства, чем разрешено установленными ограничениями, поведение определяется свойством overflow .

пример

Это правило стиля назначает максимальную ширину 400 пикселей и минимальную ширину 100 пикселей абзацам в элементе с идентификатором "example" :

 #example p { max-width: 400px; min-width: 100px; } 

Значение

Свойство принимает длину CSS (px, pt, em и т. Д.), Процент или ключевое слово none. Отрицательные значения длины недопустимы.

Значения в процентах относятся к ширине содержащего блока. Если ширина содержащего блока отрицательна, используется значение none .