CSS图片完美适应属性object-fit与object-position

最新推荐文章于 2024-11-01 16:54:21 发布

小李大魔王

最新推荐文章于 2024-11-01 16:54:21 发布

阅读量140

点赞数 3

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_74261199/article/details/142644818

版权

在放置图片的时候，直接将图片完全适应盒子会使图片拉伸变形，很不美观

① 通过object-fit: cover可以让图片覆盖式填充，就相当于把一张纸直接放到了桌子上，不会拉伸或压缩图片

② 如果桌子放不下这张纸，那么可以通过 object-position: 左边距上边距 控制纸放在桌子上的位置

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <img src="https://www.enjoying3d.com/upload/thing12/1248134/20220502110702-1.jpg">
    </div>
</body>
<style>
    .box {
        width: 400px;
        height: 400px;
        background-color: green;
    }
    .box img {
        width: 100%;
        height: 100%;
        /* 设置图片平铺 */
        object-fit: cover;
        /* 设置图片摆放位置 */
        object-position: 10px 10px;
    }
</style>
</html>

这样设置之后就保持了原先的宽高比

关注博主即可阅读全文