The max-width
property sets the maximum width of an element.
It prevents an element from becoming any larger than the specified value.
An element with a 500-pixel max-width
value.
Resize the browser and the element will never get any larger than the max-width
.
<style>
.max {
border: 1px solid tomato;
padding: 15px;
max-width: 500px;
}
</style>
<div class="max">
Henri Matisse was a French artist,
known for both his use of color and
his fluid and original draughtsmanship.
He was a draughtsman, printmaker, and
sculptor, but is known primarily as a
painter.
</div>
max-width: none | length | initial | inherit;
Value | Description |
---|---|
none |
Default. No maximum width. |
length |
Sets the maximum width. Use any valid CSS length value. |
% |
Sets the maximum width in percent. |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
An element with a 50% maximum width.
Resize the browser to see that it remains 50% of the container.
<style>
.max-width {
border: 1px solid steelblue;
padding: 15px;
max-width: 50%;
}
</style>
<div class="max-width">
Henri Matisse was a French artist,
known for both his use of color and
his fluid and original draughtsmanship.
He was a draughtsman, printmaker, and
sculptor, but is known primarily as a
painter.
</div>
This table shows when max-width
support started for each browser.
Chrome
|
1.0 | Dec 2008 |
Firefox
|
1.0 | Nov 2004 |
IE/Edge
|
7.0 | Oct 2006 |
Opera
|
7.0 | Jan 2003 |
Safari
|
2.0.2 | Oct 2005 |