css怎么不变形图⽚,css怎么让图⽚不变形
css让图⽚不变形的实现⽅法：⾸先创建⼀个HTML⽰例⽂件；然后在body中添加img标签并引⼊图⽚；最后通过设置“max-height”或者“max-width”属性来实现图⽚不变形即可。
本⽂操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。
如果想要图⽚不变形就是设置max-height或者max-width中的⼀个，或固定width或者height中的⼀个。
max-height与max-width属性设置元素的最⼤⾼度和宽度。
属性值：
none 默认。定义对元素被允许的最⼤⾼度没有限制。
length 定义元素的最⼤⾼度值。
% 定义基于包含它的块级对象的百分⽐最⼤⾼度。
inherit 规定应该从⽗元素继承 max-height 属性的值。
height与width属性设置元素的⾼度与宽度。
属性值：
auto 默认。浏览器会计算出实际的⾼度。
length 使⽤ px、cm 等单位定义⾼度。
% 基于包含它的块级对象的百分⽐⾼度。
inherit 规定应该从⽗元素继承 height 属性的值。
⽰例：
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 {
css怎么创建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;
}
效果如图：
【推荐学习：css视频教程】

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。