Max width css: max-width — CSS: Cascading Style Sheets — Вебджем.рф | Создание и продвижение сайтов

Содержание

CSS: max-width с разными единицами измерения

Примеры применения различных CSS единиц измерения длины для обозначения максимальной ширины контейнера.

Относительные единицы измерения

ch ширина символа «0»

Представляет ширину символа «0» (ноль, символ Юникод U+0030) в шрифте, применённом к элементу.

<style>.mw-ch {
  max-width: 25ch;
}</style>

em размер шрифта родительского элемента.

Представляет подсчитанный размер шрифта элемента. Если используется в свойстве font-size, представляет унаследованный размер шрифта.

<style>.mw-em {
  max-width: 20em;
}</style>

ex обычно высота буквы x, x-height.

Представляет x-height (обычно высоту буквы x) в шрифте, применённом к элементу. В шрифтах с буквой x это обычно высота букв в нижнем регистре; 1ex ≈ 0.5em во многих шрифтах.

<style>.mw-ex {
  max-width: 25ex;
}</style>

rem размер шрифта корневого элемента.

Представляет размер шрифта корневого элемента (обычно <html>). Когда используется в свойстве font-size корневого элемента, представляет значение по умолчанию (в большинстве браузеров 16px, но настройки пользователя могут переопределить это значение).

<style>.mw-rem {
  max-width: 20rem;
}</style>

Единицы, которые зависят от размеров экрана

vh 1% высоты блока содержимого.

Равна 1% высоты блока содержимого, то есть видимой части документа.

<style>.mw-vh {
  max-width: 25vh;
}</style>

vw 1% ширины блока содержимого.

Равна 1% ширины блока содержимого, то есть видимой части документа.

<style>.mw-vw {
  max-width: 25vw;
}</style>

vmin меньшее среди vh и vw.

Равна vh или vw в зависимости от того, что из них меньше.

<style>.mw-vmin {
  max-width: 25vmin;
}</style>

vmax большее среди vh и vw.

Равна vh или vw в зависимости от того, что из них больше.

<style>.mw-vmax {
  max-width: 25vmax;
}</style>

Абсолютные единицы измерения

px пиксель.

Один пиксель. Для устройств с дисплеев традиционно представляет одну точку. Тем не менее, на принтерах и экранах с высоким разрешением один пиксель CSS равен нескольким пикселям дисплея. 1px = 1/96 от 1in.

<style>.mw-px {
  max-width: 250px;
}</style>

cm сантиметр.

Один сантиметр. 1cm = 96px/2.54.

<style>.mw-cm {
  max-width: 5cm;
}</style>

mm миллиметр.

Один миллиметр. 1mm = 1/10 от 1cm.

<style>.mw-mm {
  max-width: 50mm;
}</style>

in дюйм.

Один дюйм. 1in = 2.54cm = 96px.

<style>.mw-in {
  max-width: 2in;
}</style>

pc пайка.

Одна пайка. 1pc = 12pt = 1/6 от 1in.

<style>.mw-pc {
  max-width: 12pc;
}</style>

pt точка.

Одна точка. 1pt = 1/72 от 1in.

<style>.mw-pt {
  max-width: 200pt;
}</style>

MDN <length>.

seodon.ru | CSS справочник — max-width

Опубликовано: 18.08.2010 Последняя правка: 08.12.2015

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

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

Во избежание «конфликта» размеров, при вычислении итоговой ширины браузеры используют определенный алгоритм расчетов:

Вычисление ширины элементов
Соотношение первичных значений	Итоговая ширина
Если width > max-width	max-width
Если min-width < width > max-width	max-width
Если width < max-width	width
Если min-width < width < max-width	width
Если min-width > width > max-width	min-width
Если min-width > width < max-width	min-width

В данной таблице знак «>» означает «больше», а «<» — «меньше».

А width — это ширина указанная в свойстве width или (если это свойство отсутствует) предварительная ширина элемента до учета минимальной и максимальной ширины.

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

Вычисление размеров замещаемых элементов
Соотношение первичных значений	Итоговая ширина	Итоговая высота
Если width > max-width, где (max-width * height/width) < min-height	max-width	min-height
Если height < max-height, где (min-height * width/height) > max-width
Если (width > max-width) и (height > max-height), где (max-width/width ≤ max-height/height) и (min-height > max-width * height/width)
Если (width < min-width) и (height < min-height), где (min-width/width ≤ min-height/height) и (max-width < min-height * width/height)
Если (width > max-width) и (height < min-height)
Если width < min-width, где (min-width * height/width) > max-height	min-width	max-height
Если height > max-height, где (max-height * width/height) < min-width
Если (width > max-width) и (height > max-height), где (max-width/width > max-height/height) и (min-width > max-height * width/height)
Если (width < min-width) и (height < min-height), где (min-width/width > min-height/height) и (max-height < min-width * height/width)
Если (width < min-width) и (height > max-height)
Если width > max-width, где (max-width * height/width) > min-height	max-width	max-width * height/width
Если (width > max-width) и (height > max-height), где (max-width/width ≤ max-height/height) и (min-height < max-width * height/width)	max-width	max-width * height/width
Если width < min-width, где (min-width * height/width) < max-height	min-width	min-width * height/width
Если (width < min-width) и (height < min-height), где (min-width/width > min-height/height) и (max-height > min-width * height/width)	min-width	min-width * height/width
Если height > max-height, где (max-height * width/height) > min-width	max-height * width/height	max-height
Если (width > max-width) и (height > max-height), где (max-width/width > max-height/height) и (min-width < max-height * width/height)	max-height * width/height	max-height
Если height < max-height, где (min-height * width/height) < max-width	min-height * width/height	min-height
Если (width < min-width) и (height < min-height), где (min-width/width ≤ min-height/height) и (max-width > min-height * width/height)	min-height * width/height	min-height

Тип свойства

Назначение: размеры.

Применяется: ко всем элементам, кроме незамещаемых встроенных (inline) элементов (<SPAN>, <B>, <EM> и т.д.), тегов <COL> и <COLGROUP> и элементов с display: table-column и table-column-group.

Наследуется: нет.

Значения

Значением свойства max-width является указание максимальной ширины элемента одним из следующих способов.

Размер — относительные или абсолютные величины в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Отрицательные значения недопустимы.
Проценты — значения в процентах (%), где за 100% берется ширина элемента-предка по следующему алгоритму:
1. Для непозиционируемых и относительно позиционируемых элементов (position:static или relative) максимальная ширина считается относительно ширины ближайшего блочного (block) элемента-предка, встроенного блока (inline-block) или ячейки таблицы, а если таких нет, то относительно тела документа (<BODY>).
2. Максимальная процентная ширина самого тела документа считается относительно ширины корневого элемента (<HTML>).
3. Максимальная ширина корневого элемента считается относительно ширины окна браузера.
4. Для элементов с position:fixed максимальная ширина считается относительно ширины окна браузера.
5. Для элементов с position:absolute максимальная ширина считается относительно ширины элемента, от которого идет позиционирование, причем с учетом его внутренних отступов (padding), а если такого элемента нет, то относительно окна браузера.
Отрицательные процентные значения (-20%) недопустимы. Кроме этого, если ширина элемента-предка, от которого идет расчет, является отрицательной, то процентное значение станет равным нулю (0).
none — отсутствие ограничения максимальной ширины.
inherit — наследует значение max-width от родительского элемента.

Процентная запись: относительно ширины элемента-предка или окна браузера.

Значение по умолчанию: none.

Синтаксис

max-width: размер | проценты | none | inherit

Пример CSS: использование max-width

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство max-width</title>
  <style type="text/css">
   div {
    max-width: 200px; /* максимальная ширина блока DIV */
    height: 100px; /* высота блока */
    overflow: auto; /* полосы скроллинга */
   }
  </style>
 </head>
 <body>
  <div>
   <img src="images/fauna.png" alt="Представители фауны">
  </div>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS max-width.

Версии CSS

Версия:	CSS 1	CSS 2	CSS 2.1	CSS 3
Поддержка:	Нет	Да	Да	Да

Браузеры

Браузер:	Internet Explorer			Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	6. 0	7.0	8.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Нет	Частично	Да	Да	Да	Да	Да

Internet Explorer 7.0 не понимает значение inherit.

Свойство максимальной ширины CSS — javatpoint

следующий → ← предыдущая

Иногда полезно ограничить ширину элемента определенным диапазоном. Есть два свойства max-width и min-width , используемые для установки максимальной и минимальной ширины элемента.

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

Когда содержимое больше максимальной ширины, оно автоматически изменит высоту элемента. Если содержимое меньше max-width , это свойство не действует. Это свойство гарантирует, что значение свойства width не может быть больше значения свойства

max-width . Он не допускает отрицательных значений.

Синтаксис

максимальная ширина: нет | длина | начальная | наследовать;

Значения этого свойства CSS определяются следующим образом.

нет: Это значение по умолчанию, которое не ограничивает ширину блока содержимого.

length: Это значение определяет длину max-width в px, cm, pt и т. д.

начальный: Устанавливает для свойства значение по умолчанию.

inherit: Наследует свойство родительского элемента.

Теперь давайте посмотрим на пример этого свойства CSS.

Пример

В этом примере есть четыре элемента абзаца с содержимым. Мы определяем максимальную ширину этих абзацев, используя значение длины свойства max-width . Максимальная ширина первого абзаца — 175px , второго абзаца — 20em , третьего абзаца — 350pt и четвертого абзаца — 10cm .

Содержимое первого абзаца превышает значение max-width , поэтому в выводе мы видим, что высота первого абзаца изменилась автоматически.

<голова> <название> свойство максимальной ширины <стиль> п{ граница: 4 пикселя сплошного синего цвета; цвет фона: голубой; размер шрифта: 20px; } #px { максимальная ширина: 175 пикселей; } #эм { максимальная ширина: 20em; } #пт { максимальная ширина: 350pt; } #см { максимальная ширина: 10 см; } <тело>

максимальная ширина: 175 пикселей;

Привет! Добро пожаловать на сайт javaTpoint.com. Этот сайт разработан таким образом, чтобы учащиеся могли легко изучать технологии, связанные с информатикой. На javaTpoint.com всегда можно найти простой и подробный учебник по различным технологиям. Никто не совершенен в этом мире, и нет ничего вечно лучшего. Но мы можем попытаться стать лучше.

максимальная ширина: 20em;

максимальная ширина: 350pt;

<идентификатор p = "pt"> Привет! Добро пожаловать на сайт javaTpoint.com. Этот сайт разработан таким образом, чтобы учащиеся могли легко изучать технологии, связанные с информатикой. На javaTpoint.com всегда можно найти простой и подробный учебник по различным технологиям. Никто не совершенен в этом мире, и нет ничего вечно лучшего. Но мы можем попытаться стать лучше.

максимальная ширина: 10 см;

Привет! Добро пожаловать на сайт javaTpoint. com. Этот сайт разработан таким образом, чтобы учащиеся могли легко изучать технологии, связанные с информатикой. На javaTpoint.com всегда можно найти простой и подробный учебник по различным технологиям. Никто не совершенен в этом мире, и нет ничего вечно лучшего. Но мы можем попытаться стать лучше.

Протестируйте сейчас

Выход

Следующая темаCSS min-height

← предыдущая следующий →

CSS: свойство max-width

В этом руководстве по CSS объясняется, как использовать свойство CSS под названием max-width с синтаксисом и примерами.

Описание

Свойство CSS max-width определяет максимальную ширину области содержимого элемента.

Синтаксис

Синтаксис свойства CSS max-width:

 максимальная ширина: значение;

Параметры или аргументы

значение

Максимальная ширина области содержимого элемента. Это может быть одно из следующих значений:

Значение	Описание
фиксированный	Фиксированное значение, выраженное в пикселях, em и т. д. div { max-width: 150px; } div { максимальная ширина: 50em; }
процент	Процентное значение div { max-width: 90%; }
нет	К элементу не применяется максимальная ширина div { max-width: none; }
унаследовать	Указывает, что элемент унаследует максимальную ширину от своего родительского элемента div { max-width: inherit; }

Примечание

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

Совместимость с браузерами

Свойство CSS max-width имеет базовую поддержку со следующими браузерами:

Хром
Андроид
Firefox (Геккон)
Firefox Mobile (Геккон)
Internet Explorer (IE)
Интернет-телефон
Опера
Опера Мобайл
Сафари (веб-кит)
Мобильный сафари

Пример

Мы обсудим свойство max-width ниже, исследуя примеры использования этого свойства в CSS.

Использование фиксированного значения

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

 div { максимальная ширина: 200 пикселей; }

В этом примере с максимальной шириной CSS ширина тега

не может превышать 200 пикселей.

Max width css: max-width — CSS: Cascading Style Sheets

CSS: max-width с разными единицами измерения

Относительные единицы измерения

Единицы, которые зависят от размеров экрана

Абсолютные единицы измерения

seodon.ru | CSS справочник — max-width

Тип свойства

Значения

Синтаксис

Версии CSS

Браузеры

Свойство максимальной ширины CSS — javatpoint

Синтаксис

Пример

максимальная ширина: 175 пикселей;

максимальная ширина: 20em;

максимальная ширина: 350pt;

максимальная ширина: 10 см;

CSS: свойство max-width

Описание

Синтаксис

Параметры или аргументы

Примечание

Совместимость с браузерами

Пример

Использование фиксированного значения

Добавить комментарий Отменить ответ

Рубрики