Css基础教程(二十八)

一个盒子元素加载不同大小的图像，如果我们使用与图像纵横比不成比例的宽度和高度，则图像可能会被压缩或拉伸。为解决此问题，我们可以为img元素使用object-fit。

1.object-fit

object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

属性	含义
object-fit: contain	图像将调整大小以适应其容器的纵横比。如果图像的纵横比与容器的不匹配，它将被加黑。
object-fit: fill	图像将被调整大小以适应其容器的纵横比，如果图像的纵横比与容器的不匹配，它将被挤压或拉伸。我们不希望那样。
object-fit: cover	图像也将被调整大小以适应其容器的纵横比，如果图像的纵横比与容器的不匹配，那么它将被裁剪以适应。
object-fit: none	图像根本不会调整大小，既不会拉伸也不会压缩。它像cover值一样工作，但它不尊重其容器的纵横比。

2.实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            margin: 0 auto;
            width: 400px;
        }
        div{
            width: 400px;
            height: 400px;
            margin: 0 auto;
            border: 1px solid #ccc;
            border-radius: 4px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #box1 img{
            position: absolute;
            width: 400px;
            object-fit: contain;
       }

        #box2 img{
            position: absolute;
            width: 400px;
            height: 400px;
            object-fit: fill;
        }

        #box3 img{
            position: absolute;
            width: 400px;
            height: 400px;
            object-fit: cover;
        }

        #box4 img{
            position: absolute;
            width: 400px;
            height: 400px;
            object-fit: none;
        }
    </style>
</head>
<body>
<h1>Object-fit演示案例</h1>
<hr>
<br>
<br>
<p>原始图片</p>
<div>
    <img src="https://img.simoniu.com/girl002.jpg"/>
</div>
<br>
<br>
<p>object-fit: contain</p>
<div id="box1">
  <img src="https://img.simoniu.com/girl002.jpg"/>
</div>
<br>
<br>
<p>object-fit: fill</p>
<div id="box2">
  <img src="https://img.simoniu.com/girl002.jpg"/>
</div>
<br>
<br>
<p>object-fit: cover</p>
<div id="box3">
  <img src="https://img.simoniu.com/girl002.jpg"/>
</div>
<br>
<br>
<p>object-fit: none</p>
<div id="box4">
  <img src="https://img.simoniu.com/girl002.jpg"/>
</div>
<br>
<br>

</body>
</html>

运行效果：