- max-width
- Try it
- Syntax
- Values
- Accessibility concerns
- Formal definition
- Formal syntax
- Examples
- Setting max width in pixels
- HTML
- CSS
- Result
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- CSS Height, Width and Max-width
- CSS Setting height and width
- CSS height and width Values
- CSS height and width Examples
- Example
- Example
- Setting max-width
- Example
- Try it Yourself — Examples
- All CSS Dimension Properties
- max-width
- Синтаксис
- Значения
- Объектная модель
- Браузеры
- CSS max-width Property
- Browser Support
- CSS Syntax
- Property Values
- More Examples
- Example
max-width
The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width .
Try it
max-width overrides width , but min-width overrides max-width .
Syntax
/* value */ max-width: 3.5em; /* value */ max-width: 75%; /* Keyword values */ max-width: none; max-width: max-content; max-width: min-content; max-width: fit-content(20em); /* Global values */ max-width: inherit; max-width: initial; max-width: revert; max-width: revert-layer; max-width: unset;
Values
Defines the max-width as an absolute value.
Defines the max-width as a percentage of the containing block’s width.
No limit on the size of the box.
The intrinsic preferred max-width .
The intrinsic minimum max-width .
Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)) .
Accessibility concerns
Ensure that elements set with a max-width are not truncated and/or do not obscure other content when the page is zoomed to increase text size.
Formal definition
Initial value | none |
---|---|
Applies to | all elements but non-replaced inline elements, table rows, and row groups |
Inherited | no |
Percentages | refer to the width of the containing block |
Computed value | the percentage as specified or the absolute length or none |
Animation type | a length, percentage or calc(); |
Formal syntax
max-width =
none |
|
min-content |
max-content |
fit-content( )
=
|
Examples
Setting max width in pixels
In this example, the «child» will be either 150 pixels wide or the width of the «parent,» whichever is smaller.
HTML
div id="parent"> div id="child"> Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis. div> div>
CSS
#parent background: lightblue; width: 300px; > #child background: gold; width: 100%; max-width: 150px; >
Result
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Jul 18, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
CSS Height, Width and Max-width
The CSS height and width properties are used to set the height and width of an element.
The CSS max-width property is used to set the maximum width of an element.
CSS Setting height and width
The height and width properties are used to set the height and width of an element.
The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element.
CSS height and width Values
The height and width properties may have the following values:
- auto — This is default. The browser calculates the height and width
- length — Defines the height/width in px, cm, etc.
- % — Defines the height/width in percent of the containing block
- initial — Sets the height/width to its default value
- inherit — The height/width will be inherited from its parent value
CSS height and width Examples
Example
Set the height and width of a element:
Example
Set the height and width of another element:
Note: Remember that the height and width properties do not include padding, borders, or margins! They set the height/width of the area inside the padding, border, and margin of the element!
Setting max-width
The max-width property is used to set the maximum width of an element.
The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the containing block, or set to none (this is default. Means that there is no maximum width).
The problem with the above occurs when the browser window is smaller than the width of the element (500px). The browser then adds a horizontal scrollbar to the page.
Using max-width instead, in this situation, will improve the browser’s handling of small windows.
Tip: Drag the browser window to smaller than 500px wide, to see the difference between the two divs!
Note: If you for some reason use both the width property and the max-width property on the same element, and the value of the width property is larger than the max-width property; the max-width property will be used (and the width property will be ignored).
Example
This element has a height of 100 pixels and a max-width of 500 pixels:
Try it Yourself — Examples
Set the height and width of elements
This example demonstrates how to set the height and width of different elements.
Set the height and width of an image using percent
This example demonstrates how to set the height and width of an image using a percent value.
Set min-width and max-width of an element
This example demonstrates how to set a minimum width and a maximum width of an element using a pixel value.
Set min-height and max-height of an element
This example demonstrates how to set a minimum height and a maximum height of an element using a pixel value.
All CSS Dimension Properties
Property | Description |
---|---|
height | Sets the height of an element |
max-height | Sets the maximum height of an element |
max-width | Sets the maximum width of an element |
min-height | Sets the minimum height of an element |
min-width | Sets the minimum width of an element |
width | Sets the width of an element |
max-width
Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от значений установленных свойств width , max-width и min-width . В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.
Значения свойств | Ширина | ||||
---|---|---|---|---|---|
min-width | width | max-width | width | ||
width | max-width | width | |||
width | > | max-width | max-width | ||
min-width | > | width | > | max-width | min-width |
min-width | > | width | max-width | min-width |
Данные из таблицы следует понимать следующим образом. Если значение ширины ( width ) больше значения max-width , то ширина элемента принимается равной значению max-width .
Синтаксис
max-width: значение | проценты | none | inherit
Значения
В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.
none Отменяет действие этого свойства. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
Текст заголовка
Текст примера
В данном примере ширина страницы ограничена размером 320 пикселов для всех наладонных устройств. К ним относятся КПК, смартфоны и другие устройства, способные отображать HTML-документы.
Объектная модель
[window.]document.getElementById(» elementID «).style.maxWidthБраузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
CSS max-width Property
The max-width property defines the maximum width of an element.
If the content is larger than the maximum width, it will automatically change the height of the element.
If the content is smaller than the maximum width, the max-width property has no effect.
Note: This prevents the value of the width property from becoming larger than max-width . The value of the max-width property overrides the width property.
Default value: | none |
---|---|
Inherited: | no |
Animatable: | yes, see individual properties. Read about animatable Try it |
Version: | CSS2 |
JavaScript syntax: | object.style.maxWidth=»600px» Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
CSS Syntax
Property Values
Value | Description | Demo |
---|---|---|
none | No maximum width. This is default | Play it » |
length | Defines the maximum width in px, cm, etc. Read about length units | Play it » |
% | Defines the maximum width in percent of the containing block | Play it » |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
Set the maximum width of a
element to 50% of the container: