前端图片变形解决

subsistent

已于 2023-09-15 10:32:47 修改

阅读量660

点赞数 1

分类专栏： Web 文章标签：前端

于 2023-08-26 22:57:38 首次发布

本文链接：https://blog.csdn.net/m0_65121454/article/details/132517004

版权

Web 专栏收录该内容

165 篇文章 1 订阅

订阅专栏

在引入图片的时候，

如果是背景图

设置了 background-size 属性为固定大小，如果图片的大小不匹配，会出现变形的效果，

这时候把 background-size 属性设置为 cover 就可以解决:

background-size: cover;

如果是通过 img 标签的 src 属性引入的

需要把 object-fit 属性设置为 cover:

object-fit: cover;

如果是在小程序里，通过 img 标签的 src 属性引入的

微信小程序图片不支持 object-fit css 属性，官方给 img 标签提供了 mode 属性，

将 img 标签的 mode 属性设置为 "aspectFill" 就可以解决了。

img 为不确定尺寸的图片，使图片可以完整显示在 container 中（过大时需要等比例缩小），并水平垂直居中

<head>
    <style>
        .container {
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .container>img {
            max-width: 100%;
            max-height: 100%;
        }
    </style>
</head>

<body>
    <div class='container'>
        <img src='./images/1.jpg' />
    </div>
</body>

关注博主即可阅读全文