css如何让图片不变形

2023-06-14 11:06:16 461人浏览八月长安

摘要

小编给大家分享一下CSS如何让图片不变形，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！css让图片不变形的实现方法：首先创建一个html示例文件；然后在body中

小编给大家分享一下CSS如何让图片不变形，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

css让图片不变形的实现方法：首先创建一个html示例文件；然后在body中添加img标签并引入图片；最后通过设置“max-height”或者“max-width”属性来实现图片不变形即可。

如果想要图片不变形就是设置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;            }         .test6 img {        max-width: 300px;        max-height: 100px;    }        .test7 {        width: 300px;        height: 100px;            }         .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如何让图片不变形