object-position

3 月，跳不动了？>>> object-fit和object-position是我最近最喜欢的两个CSS属性。他们使开发人员可以操作img或video中的内容，类似于我们可以用background-position和background-size操作背景内容一样。 首先，让我们深入探讨一下object-fit 该属性定义一个元素，如img，如何适应容器的宽度和高度。我们可以用object-fit告诉内容以各种方式填充容器，如“保存该长宽比！” 或“向上伸展，尽可能多的占用空间！” 这里有一个案例: 这张图片的大小为400px x 260px。如果我们这样给图片设置样式... img { width: 200px;height: 300px;} ...最后图片失真，因为图片为了适应容器已经被压扁。 当我们改变了img的高度和宽度时，img的内容将占用我们所创建容器的所有可用空间，从而破坏了之前创建的的长宽比。 为了保持图像的长宽比，同时也可以填充空间，我们可以使用object-fit： .cover { object-fit: cover;} 左侧是我们原始的图像，右侧图像已裁剪原图像的两侧以保持我们现在的长宽比！这看起来没什么特别之处，但一旦进入到缩放设计，那么object-fit就立马彰显其真正的威力。 让我们看另外一个案例: 在这里，我们有两个图像