CSS max-width property

 The function of the CSS max-width property is to limit the maximum width of web page elements not to exceed the specified limit. Why is this function available? Because there are many elements or elements on the web page that will change with the screen size or the condition of the parent element, change the width of your own element. If you have a picture or a video, it will follow the parent layer or screen. The size of the image or video can be automatically zoomed, but you can’t zoom in endlessly. If it exceeds the size suitable for browsing, the picture will be ugly. At this time, we can use the function of the CSS max-width property to limit the maximum size of this picture or video. The width of must be kept at a size suitable for reading. All major browsers support the function of the CSS max-width property.

CSS max-width property syntax

max-width: maximum width value;

The CSS max-width property has only one parameter that can be set, that is, the maximum width value . Long-term length units such as em, cm, px... etc. can be accepted, and the percentage (%) setting method can also be accepted, as shown in the following table For the available parameter values ​​of the CSS max-width property, please refer to it yourself.

CSS max-width property can set parameter value

Width value	grammar	Description
none	max-width:none;	The default value does not set the maximum width limit.
width	max-width: number + unit;	Acceptable units are px, em, cm and other web standard units.
%	max-width: number%;	Use percentage to set the maximum width of web page elements.
inherit	max-width:inherit;	The maximum width attribute value inherited from the parent layer.

Note: Most IE browsers do not support the inherit effect, so it is not recommended.

CSS max-width property example

<p>
This is a test text. The maximum width of the paragraph has not been set, so the text will extend to the right and will wrap unless it hits the sample border.
</p>
<p style=" max-width:200px; ">
This is a piece of test text. We set the maximum width of the paragraph text to 200px, so all the text will be squeezed within a width of 200px .
</p>

Example output

This is a test text, and the maximum width of the paragraph is not set, so the text will extend to the right and will wrap unless it hits the sample border.

This is a test text. We set the maximum width of the paragraph text to 200px, so all the text will be squeezed within a width of 200px.

In the example, we have prepared two paragraphs of <p> text. The first paragraph does not use the CSS max-width property, so the text within the <p></p> tag is not limited by the maximum width, as long as If you don’t touch the dashed box in the example output, it will extend all the way to the right. The second paragraph uses the max-width property and limits the maximum width to 200px, so the text will wrap automatically to avoid exceeding the maximum width. 200px limit.

Corresponding to the CSS max-width property is: CSS min-width property .