css如何控制图片不变形？

更新日期: 2020-02-10阅读: 2.3k标签: 图片分享

复制链接

新浪微博

QQ 好友

扫一扫分享

在做网页时会遇到许多的问题，有的时候会遇到图片变形的问题，我们该如何通过css控制图片不变形呢？下面我们来看一下通过css控制图片不变形的方法。

如果想要图片不变形就是设置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>
        <img src="1.jpg" />
    </div>
    <div>
        <img src="1.jpg" />
    </div>
    <div>
        <img src="1.jpg" />
    </div>
    <div>
        <img src="1.jpg" />
    </div>
    <div>
        <img src="1.jpg" />
    </div>
    <div>
        <img src="1.jpg" />
    </div>
    <div>
        <img src="1.jpg" />
</body>
</html>

效果如图：

链接: https://fly63.com/article/detial/8615

css如何控制图片不变形？

原生Js对文件类型的判断，判断文件是图片，视频等格式

前端图片懒加载的实现，采用Lazy Load 图片延迟加载提高用户体验

web前端图片加载优化，从图片模糊到清晰的实现过程

lazysizes.js使用方法_实现图片懒加载、延迟加载的js插件

js实现图片局部放大效果

网站图片优化的重要性与技巧方案

css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果

原生js 生成海报图_利用canvas合成图片的实现方法

网页中默认图片的几种解决方式

h5移动端禁止长按图片保存