为什么对象适合在 flexbox 中不起作用？

Question

我有几个列，我使用 flex 给出相等的宽度。每个都包含img 标签，我希望这些图片显示object-fit: cover 大小。

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.test {
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}
img {
  object-fit: cover;
}

<div class="container">
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
</div>

图像未调整大小，如this demo 所示。这是为什么呢？

Answer 1

作为在不兼容的浏览器中支持图像的object-fit 功能的一种方式，您可以使用background-image 和background-size 创建一个CSS 类。为了正确计算占用的空间，您包装了一个 img 元素并使其不可见。下面的例子。

HTML

<div class="my-image">
    <img src="path/to/my/image"/>
</div>

CSS

.my-image {
    background-image: url('path/to/my/image');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.my-image > img {
    visibility: hidden;
}

Answer 2

如果 <img/> 在 IE11 中被拉伸到 100%，则在 <img/> 本身上添加 flex-shrink: 0，如下所示：Flexbox on IE11: image stretched for no reason?

Answer 3

对于那些不能“废弃容器并让图像本身成为弹性项目”的人，只需添加容器级别：

<div class="display-flex">
  <div class="flex-grow position-relative">
    <div class="pos-absolute top-left-right-bottom-0">
      <img class="object-fit-cover height-width-100">

Answer 4

来自specification：

object-fit 属性指定如何替换 元素应安装到由其使用高度确定的盒子上，并且 宽度。

关键术语是：适合由其使用的高度和宽度确定的框

图像被替换，而不是它的容器。并且由其使用的高度和宽度建立的框与图像本身有关，而不是它的容器。

所以，废弃容器，让图像本身成为弹性项目。

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

img {
  object-fit: cover;
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}

<div class="container">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
  <img src="http://placehold.it/1920x1080">
</div>

Revised Codepen

---

其他详情

5.5. Sizing Objects: the object-fit property

object-fit 属性指定如何替换 元素应安装到由其使用高度确定的盒子上，并且 宽度。

下面是三个值：

• cover

  被替换的内容的大小可以保持其纵横比，同时 填充元素的整个内容框。

• contain

  被替换的内容的大小可以保持其纵横比，同时 适合元素的内容框。

• fill

  被替换的内容的大小可以填满元素的内容框。

使用cover，图像会保持其纵横比并覆盖所有可用空间。使用此选项，可能会在屏幕外裁剪大部分图像。

contain 的纵横比也保持不变，但图像会缩放以适应框。这可能会导致左侧和/或右侧（纵向适合）或顶部和/或底部（横向适合）的空白。 object-position 属性可用于在其框内移动图像。

fill 放弃了纵横比，图像的大小适合框。

---

浏览器兼容性

在撰写本文时，object-fit is not supported by Internet Explorer。有关解决方法，请参阅：

• Neat trick for CSS object-fit fallback on Edge (and other browsers)
• fitie - An object-fit polyfill for Internet Explorer
• object-fit-images - Adds support for object-fit on IE9, IE10, IE11, Edge and other old browsers
• Polyfill (mostly IE) for CSS object-fit property to fill-in/fit-in images into containers.

Answer 5

问题在于object-fit 指定了图像在img 中的绘制方式，但您没有指定这些元素的大小，只指定了它们的.test 父元素的大小。

所以Michael_B's answer 的替代方法是使图像具有与弹性项目相同的大小：

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

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.test {
  flex: 1;
  margin-right: 1rem;
  overflow: hidden;
  height: 400px;
}
img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div class="container">
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
  <div class="test"><img src="http://placehold.it/1920x1080"></div>
</div>