Home >Web Front-end >CSS Tutorial >How to keep images from deforming with css
How to keep images from deforming with css
- 藏色散人Original
- 2021-04-08 09:36:226143browse
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
float: left;
}
.test1 img {
width: 187.5px;
height: 156.5px;
}
.test2 img {
width: 300px;
height: 100px;
}
.test3 img {
max-width: 300px;
max-height: 100px;
}
.test4 img {
max-width: 100%;
height: 200px;
}
.test5 {
width: 300px;
height: 200px;
}
.test5 img {
max-width: 100%;
max-height: 100%;
}
.test6 {
width: 300px;
height: 100px;
/*overflow: hidden;*/
}
.test6 img {
max-width: 300px;
max-height: 100px;
}
.test7 {
width: 300px;
height: 100px;
/*overflow: hidden;*/
}
.test7 img {
max-width: 300px;
}
</style>
</head>
<body>
<div class="test1">
<img src="1.jpg" / alt="How to keep images from deforming with css" >
</div>
<div class="test2">
<img src="1.jpg" / alt="How to keep images from deforming with css" >
</div>
<div class="test3">
<img src="1.jpg" / alt="How to keep images from deforming with css" >
</div>
<div class="test4">
<img src="1.jpg" / alt="How to keep images from deforming with css" >
</div>
<div class="test5">
<img src="1.jpg" / alt="How to keep images from deforming with css" >
</div>
<div class="test6">
<img src="1.jpg" / alt="How to keep images from deforming with css" >
</div>
<div class="test7">
<img src="1.jpg" / alt="How to keep images from deforming with css" >
</body>
</html>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!