今天开始玩弄css的一些比较冷门但是可能比较实用的属性 object-fit。
首先让我们先看看一张效果图
这两张自拍，你个人觉得哪张比较好看,不用想都知道第一张好看啦，我们肯定希望我们上传的图片都是以第一种图片当头像啊，而不是第二种扁扁的。那么这样的效果是怎么实现的呢？
诀窍 object-fit
相信大多数人都对这个属性比较陌生吧。没咋看过这个属性吧！它有啥用呢？
我来给大家介绍介绍这个属性。
object-fit是一个CSS属性，用于控制图片或视频等替换元素的尺寸和位置，以使其适合其容器。
默认情况下，替换元素的大小取决于其本身的大小，而不是其容器的大小。这可能会导致替换元素与其容器不匹配，或者在缩放容器时无法应用正确的比例。
使用object-fit属性，可以指定替换元素如何调整其大小以适应其容器。它有以下几个值：
fill：默认值，替换元素会拉伸以填充容器，可能会导致元素的宽高比发生变化。contain：替换元素会缩放以适应容器，保持其宽高比，可能会留有空白区域。cover：替换元素会缩放以填充容器，保持其宽高比，可能会被裁剪。none：替换元素将保持其本来的尺寸和宽高比，可能会溢出容器。scale-down：替换元素会根据容器的大小进行缩放，但不会超过其原始大小，可能会留有空白区域。
看完还是好晕，不如直接看代码和效果图
注释解释了代码中每个部分的作用：
object-fit: cover将图像填充到容器中，保持比例不变。border-radius: 50%将图像的四个角设置为圆角，使其呈现圆形。width: 340px和height: 340px设置图像的宽度和高度。border: 1px solid #ccc设置图像周围的边框。
容器1和容器2具有相同的样式，但容器1使用了object-fit属性，而容器2没有。这样，我们可以比较两者之间的区别，看看object-fit如何影响图像的呈现方式。
html
<!DOCTYPE html>
<html>
<head>
<title>object-fit示例</title>
<style>
/* 容器1样式 */
.container1 img {
object-fit: cover; /* 图像填充容器，保持比例不变 */
border-radius: 50%; /* 圆角 */
width: 340px;
height: 340px;
border: 1px solid #ccc;
}
/* 容器2样式 */
.container2 img {
border-radius: 50%; /* 圆角 */
width: 340px;
height: 340px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>自拍照 object-fit</h2>
<!-- 容器1 -->
<div class="container1">
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.e62783996335efecfb15e445205cc5f6?rik=2Z0xpGAe3tn1kQ&riu=http%3a%2f%2fwww.xgsy188.com%2fuploadfile%2f20131151461663843.jpg&ehk=rKGrd9FbAQUFWicdL8Omt%2bFaMw%2f09v2obcuVTAWca4w%3d&risl=&pid=ImgRaw&r=0" alt="自拍照">
</div>
<h2>自拍照2</h2>
<!-- 容器2 -->
<div class="container2">
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.e62783996335efecfb15e445205cc5f6?rik=2Z0xpGAe3tn1kQ&riu=http%3a%2f%2fwww.xgsy188.com%2fuploadfile%2f20131151461663843.jpg&ehk=rKGrd9FbAQUFWicdL8Omt%2bFaMw%2f09v2obcuVTAWca4w%3d&risl=&pid=ImgRaw&r=0" alt="自拍照">
</div>
</body>
</html>
