CSS中可以使用background-size属性控制背景图片的大小，让图片适应当前元素的大小。不过，它只对背景图片有效，如果我们需要控制一张img标签中的图片大小，该怎么办呢？

其实可以通过设置图片的宽度和高度来实现这个目的。但是，如果我们仅仅设置其中一个值，图片会按比例缩放，导致图片变形，不美观。所以，我们需要使用CSS3中的object-fit属性来控制图片的形状，让图片按比例缩放，不变形。

object-fit属性有以下几个取值：

object-fit:fill;       /*默认值，拉伸图片以填充元素*/
object-fit:contain;    /*缩小图片以适应元素*/
object-fit:cover;      /*拉伸图片以完全覆盖元素*/
object-fit:none;       /*按图片原始大小显示，超出元素部分不显示。*/
object-fit:scale-down; /*object-fit: contain（缩小图片以适应元素）和object-fit:none（按图片原始大小显示，超出元素部分不显示）中，选取尺寸较小的值。*/

比如，我们想要让图片缩小以适应元素，同时保持图片不变形，我们可以这样设置：

img{
width: 100%;
height: 100%;
object-fit: contain;
}

这里我们将img的宽度和高度设置为100%（根据所在元素自适应），然后将object-fit设置为contain，这样图片就按比例缩放，适应元素。如果我们想要拉伸图片以填充元素，可以将object-fit设置为fill。

总的来说，使用object-fit属性可以轻松控制图片的形状，不需要再像以前一样，在CSS中设置图片宽度和高度，不停调整，让图片不变形。使用object-fit，我们可以更专注于页面布局和样式。