• 技术文章 >web前端 >css教程

    css怎么让图片不变形

    藏色散人藏色散人2021-04-08 09:36:22原创100

    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>

    效果如图:

    e1e23443f0cb1e33a85c3d614b40f4d.png

    【推荐学习:css视频教程

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

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:css怎么设置显示隐藏动画 下一篇:css改变滚动条样式
    第15期线上培训班

    相关文章推荐

    • CSS如何使用精灵图• css怎么实现英文不换行• css怎么让样式失效• css怎么设置显示隐藏动画• css怎么实现隐藏并占位

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网