Html 对象匹配不影响图像

我一直试图在

文章

元素中放置的一些图像上使用

对象匹配

，但它似乎根本不会影响它们

对象拟合

属性所需的值应该是

覆盖

，但到目前为止，其他值似乎都不起作用

当我改变它的价值时，它们不会收缩，不会增长，不会。。。没什么

如果您看到代码笔，则两行之间有空白，并且图像的空间/高度并不完全相同（正如

对象拟合：封面所期望的那样）



正文{
边距：0自动；填充：0；
}
主要{
最小高度：70vh；
填充：0；
}
main>section.posts{
框大小：边框框；
边距：0；填充：0；
显示器：flex；
柔性流：行换行；
}
main>section.posts>article{
轮廓：1px纯红；
宽度：22vw；
最小高度：100vh；
边距：0；填充：0；
柔性生长：1；
溢出：隐藏；
框大小：边框框；
}
main>section.posts>article>img{/*我们的嫌疑犯*/
对象匹配：覆盖；
}
以下是规范中的说明：


对象拟合
属性指定如何替换对象的内容
元件应安装在由其使用高度和尺寸确定的箱体上
宽度

我专注于。。。安装在由其使用的高度和宽度确定的箱子上

因此，我为您的
img
元素添加了
height
和
width
属性，现在似乎可以工作了


要删除每个图像下的一小行空白，请将
vertical align:bottom
添加到
img
。有关说明，请参见此处：

作为一个旁注，您可能需要考虑浏览器支持：
（无IE支持）
（无IE支持）
（考虑前缀）
object fit
仅影响图像在
img
边界内的显示方式。

object fit CSS属性设置替换元素的内容，例如

调整图像大小以查看具有不同尺寸的特性

填充（默认）
包含
盖
没有一个
缩小









我将容器、图像和容器的父对象更改为
框大小：内容框
，因为img已被替换，并在容器上切换了
对象适合度：盖子
。由于img预计会被裁剪，高度为100vh、宽度为100%和+22hw偏移量在前四个img上效果良好，因此底部两个img似乎都有一点失真，但失真不大<代码>对象位置

仍然不适用于我（从不适用）：-\

---

要使

对象适合

工作，图像本身需要

宽度

和

高度

。在OP的CSS中，图像没有设置宽度和/或高度，因此对象拟合无法工作

线索：

宽度

和

高度

不一定是图像本身的尺寸将其视为

div

：如果希望

div

填充其容器，则将

width:100%; height:100%;

…浏览器将知道此div应完全填满其容器的空间

如果出现

img

，浏览器将执行两个步骤：

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

浏览器将图像像素适配到此框中：默认情况下，图像将被压缩/拉伸，以便图像宽度与框宽度匹配，图像高度与框高度匹配。但使用

对象拟合

，您可以选择如何匹配图像和框尺寸。例如，使用

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需要在

main>section.posts>article

中定义

height

，在对象匹配不起作用的情况下，我也遇到了类似的问题。我给图像添加了最大宽度，效果很好

.myImg {
    object-fit: cover;
    max-width: 100%;
    object-position: center;
}

---

我发现了一个非常简单的技巧，对我来说效果最好，但首先要感谢tenyon从他的回答中获得了灵感

---

您只需将img元素放入所需的任意大小的div元素中，然后指定图像的宽度和高度inherit，然后为其指定所需的object fit值，即可完美运行。

Hi，首先，感谢您的时间：）我的问题是object fit似乎对图像没有任何作用。当我改变它的价值时，它们不会收缩，不会增长，不会。。。没有什么。。。。如果你看到代码笔，两行之间有空白，图像的空间/高度也不尽相同（正如

object fit:cover

所预期的那样）。我从未使用过object fit，我认为它在我当前的移动chrome浏览器上不起作用，但从我所读到的内容来看，这似乎适用于图像本身，而不是图像容器。因此，如果您指定图像的宽度和高度，您可能会得到您想要的。因此，在你的情况下，也许让flex与图像而不是我手机上的文章一起工作，所以这有点难写。整个对象适合点的副本：封面是因为它保留了纵横比。对我来说仍然不起作用：/而且这不会太容易维护，因为我将来不知道图像的尺寸。无论如何，谢谢你：）这个演示在这方面效果很好

.myImg {
    object-fit: cover;
    max-width: 100%;
    object-position: center;
}