CSS max-height property

 The function of the CSS max-height property is to design the maximum height of web elements, such as the max-height of a paragraph or the maximum height limit of a picture. The max-height property is an advanced usage of the height property, and is used by all mainstream browsing All devices support the function of the max-height attribute, and you can use length units or percentages to represent the maximum element height.

CSS max-height property syntax

max-height: height value;

The CSS max-height property can only set one height parameter value. Commonly used ones are self-defined height and percentage, as follows:

CSS max-height property parameter value table

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

The last inherit attribute value is not supported in IE browser and is not recommended.

CSS max-height property example, adjust the maximum height of the image

原始圖片：<img src="upload/20141007145509.png" style="height:auto;"><br><br>
修改圖片：<img src="upload/20141007145509.png" style="max-height:50px;">

Example output

Original picture: 

Modify picture:

The original image height of the example is 80px. We use the auto of the height adjustment attribute to display the original image. When modifying the image, use "max-height:50px;" to limit the maximum height of the image to 50px. The picture seems to be scaled down.

Some people may think that this effect is no different from directly setting the height to 50px. Indeed, the presentation effect of the example is correct, but don’t forget that the max-height property is not just used to set a fixed height, but It is used to set the "maximum height". In other words, in this way of writing the example, the image can be reduced to less than 50px. As long as it is matched with other conditions, such as the size of the parent layer of the image is compressed, the image may be reduced again. It is very different from height.

It is usually necessary to set the maximum height that changes with the screen size, which is expressed as a percentage.

Corresponding to max-height is: CSS min-height property .