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 属性的值。

示例：

!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" />
        /div>
        div class="test2">
            img src="1.jpg" />
        /div>
        div class="test3">
            img src="1.jpg" />
        /div>
        div class="test4">
            img src="1.jpg" />
        /div>
        div class="test5">
            img src="1.jpg" />
        /div>
        div class="test6">
            img src="1.jpg" />
        /div>
        div class="test7">
            img src="1.jpg" />
    /body>
    /html>
    

效果如图：

【推荐学习：css视频教程】

以上就是css怎么让图片不变形的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！