img标签图片自适应的样式

img标签图片自适应的样式问题：img标签宽高固定的情况下，上传的图片尺寸不一致，会导致图片被拉伸变形，影响页面美观。解决方法：用css3的object-fit 属性、object-position 属性可以解决，代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><t

小野不打野

12782人浏览 · 2021-12-23 10:47:05

小野不打野 · 2021-12-23 10:47:05 发布

问题：
img标签宽高固定的情况下，上传的图片尺寸不一致，会导致图片被拉伸变形，影响页面美观。

解决方法：
用css3的object-fit 属性、object-position 属性可以解决，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img标签图片自适应的样式</title>
    <style>
        body {
            display: flex;
            justify-content: center;
        }
        .img {
            width: 300px;
            height: 300px;
            border: black 1px solid;
            background-color: darkgrey;
        }
             /* 图片自适应的样式 */
        .img-object{
            object-fit: cover;
            object-position: 50% 20%;
        }
    </style>
</head>
<body>
    <div style="height: 350px;margin-right: 50px;"><h4>图片没有自适应: </h4><img class="img" src="./21.jpg"></div>
    <div style="height: 350px;"><h4>图片自适应：</h4><img class="img img-object" src="./21.jpg"></div>
</body>
</html>