对象适合不影响图像

为了object-fit工作,图像本身需要一个width和height.在OP的CSS中,图像没有设置宽度和/或高度,因此对象适合不起作用.

线索:width和height不需要的图像本身的尺寸!可以把它想象成一个div:如果你想要div填充它的容器,你会设置

width:100%; height:100%;

...并且浏览器会知道这个div应该完全填满其容器的空间.

如果是img,浏览器执行两个步骤:

浏览器创建一个边界框:默认情况下,框尺寸将是图像本身的精确尺寸.但我们可以自由地告诉浏览器将图像的大小调整为其容器宽度的100%和容器高度的100%.然后它将创建一个完全填充容器空间的盒子.

浏览器将图像像素拟合到此框中:默认情况下,图像将被挤压/拉伸,因此图像宽度与框宽度匹配,图像高度与框高度匹配.但是使用时object-fit,您可以选择如何匹配图像和框尺寸.例如,使用object-fit:cover命令放大/缩小图像以完全填充框,同时保持其纵横比.

关于OP,我只想设置:

main > section.posts > article > img {
  width: 100%; /* image box size as % of container, see step 1 */
  height: 100%; /* image box size as % of container, see step 1 */
  object-fit: cover; /* matching of image pixels to image box, see step 2 */
}

最后一点需要注意:当使用%值进行大小调整时,容器必须具有定义的宽度和高度才能使对象适合工作.OP需要定义height在main > section.posts > article.

对象飞度

object-fit CSS属性设置如何调整替换元素(如a 或)的内容以调整其容器的大小.

替换元素

内容不受当前文档样式影响的元素.使用CSS可以影响替换元素的位置,但不会替换替换元素本身的内容.

这意味着对象拟合与article标记无关,因为对象拟合仅关注img标记的维度.

您还可以通过单击object-fit的链接来查看下面的示例.

$(function() { $("img").resizable(); });

img {
  width: 300px;
  height: 300px;
  border: 1px solid #FF0000;
  background-color: #00FF00;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}
.cover {
  object-fit: cover;
}
.none {
  object-fit: none;
}
.scaledown {
  object-fit: scale-down;
}

.variant1 {
  max-width: 100px;
}

.variant2 {
  max-height: 100px;
}