Object-fit属性

最新推荐文章于 2025-04-30 22:01:19 发布

原创最新推荐文章于 2025-04-30 22:01:19 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

小白分享专栏收录该内容

29 篇文章

订阅专栏

本文通过实例解析了CSS中object-fit属性的应用，展示了如何使用该属性调整图片以适应不同的容器尺寸，包括cover、fill、none、contain和scale-down五种模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述看上图找不同喽！
以上几张图片有什么不同呢，用div+css样式写出来，遇见这样的题，真的是有点懵逼，明明第四和第五张一模一样，没了解过object-fit这个属性前，我想过利用background背景属性去调节，但是还是有点不怎么好的感觉，然后就在mdn里面找到了object-fit这个属性，不说了上demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
            display: flex;
            width: 1200px;
            justify-content: space-evenly;
            border:solid 2px green;
            /* flex-direction: column; */
            /* margin: 0 auto; */
        }
        ul li{
            width: 120px;
            height: 150px;
            border:solid 1px red;
        }
        ul li img{
            width: 120px;
            height: 150px;
        }
        ul li:first-child img{
            object-fit: cover;
        }
        ul li:nth-child(2) img{
            object-fit: fill;
        }
        ul li:nth-child(3) img{
            object-fit: none;
        }
        ul li:nth-child(4) img{
            object-fit:contain;
        }
        ul li:nth-child(5) img{
            object-fit: scale-down;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <img src="u=2207198614,3630683872&fm=26&gp=0.jpg" alt="" srcset="">
        </li>
        <li>
            <img src="./u=2207198614,3630683872&fm=26&gp=0.jpg" alt="" srcset="">
        </li>
         <li>
            <img src="u=2207198614,3630683872&fm=26&gp=0.jpg" alt="" srcset="">
        </li>
        <li>
            <img src="./u=2207198614,3630683872&fm=26&gp=0.jpg" alt="" srcset="">
        </li>
        <li>
            <img src="u=2207198614,3630683872&fm=26&gp=0.jpg" alt="" srcset="">
        </li>
      
    </ul>
</body>
</html>