How to keep images from deforming with css

How to achieve non-deformation of images in css: first create an HTML sample file; then add the img tag to the body and introduce the image; finally achieve it by setting the "max-height" or "max-width" attribute The picture does not need to be deformed.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

If you want the picture not to be deformed, set one of max-height or max-width, or fix one of width or height.

The max-height and max-width attributes set the maximum height and width of the element.

Attribute value:

none Default. The definition places no limit on the maximum height allowed for an element.

length defines the maximum height value of the element.

% defines the maximum height as a percentage based on the block-level object that contains it.

inherit specifies that the value of the max-height attribute should be inherited from the parent element.

The height and width attributes set the height and width of the element.

Attribute value:

auto Default. The browser will calculate the actual height.

length Define the height using units such as px, cm, etc.

% Based on the percentage height of the block-level object that contains it.

inherit specifies that the value of the height attribute should be inherited from the parent element.

Example:

The effect is as shown:

[Recommended learning: css video tutorial]

The above is the detailed content of How to keep images from deforming with css. For more information, please follow other related articles on the PHP Chinese website!