为什么 object-fit 在 flexbox 中不起作用?

问题描述

我有几列使用 flex 赋予相同的宽度.每个都包含 img 标签，我希望这些图像展示 object-fit: cover 大小.

.container {显示:弹性；弹性方向:行；宽度:100%；}.测试 {弹性:1；右边距:1rem；溢出:隐藏；高度:400px；}图片{适合对象:覆盖；}

<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>

图像未调整大小，如本演示所示.这是为什么?

解决方案

来自 规范:

object-fit 属性指定替换的内容如何元素应适合由其使用的高度建立的框，并且宽度.

关键术语是:适合由其使用的高度和宽度建立的框

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

因此，废弃容器并使图像本身成为弹性项目.

.container {显示:弹性；弹性方向:行；宽度:100%；}图片{适合对象:覆盖；弹性:1；右边距:1rem；溢出:隐藏；高度:400px；}

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

修订后的 Codepen

其他详细信息

5.5.调整对象大小:object-fit财产

object-fit 属性指定替换的内容如何元素应适合由其使用的高度建立的框，并且宽度.

以下是三个值:

• 封面

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

• 包含

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

• fill

  被替换的内容的大小可以填充元素的内容框.

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

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

使用 fill 放弃纵横比，调整图像大小以适合框.

浏览器兼容性

在撰写本文时，Internet Explorer 不支持 object-fit.有关解决方法，请参阅:

• CSS object-fit 在 Edge(和其他浏览器)上回退的巧妙技巧
• fitie - 适用于 Internet Explorer 的 object-fit polyfill
• object-fit-images - 添加对 object-fit在IE9、IE10、IE11、Edge等老浏览器上
• Polyfill(主要是 IE)用于 CSS object-fit 属性的填充/fit-in 图像到容器中.

I have several columns that I am giving equal width using flex. Each contains img tags, and I'd like those images to exhibit the object-fit: cover sizing.

.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>

The images are not resizing, as can be seen in this demo. Why is that?

解决方案

From the specification:

The key term being: fitted to the box established by its used height and width

The image gets replaced, not its container. And the box established by its used height and width relates to the image itself, not its container.

So, scrap the container and make the images themselves the flex items.

.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

---

Additional Details

With cover the image retains its aspect ratio and covers all available space. With this option, much of an image may be cropped off-screen.

With contain the aspect ratio is also maintained, but the image scales to fit within the box. This may result in whitespace on the left and/or right (portrait fit), or top and/or bottom (landscape fit). The object-position property can be used to shift the image within its box.

With fill the aspect ratio is abandoned and the image is sized to fit the box.

---

Browser Compatibility

As of this writing, object-fit is not supported by Internet Explorer. For a workaround see:

• 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.

这篇关于为什么 object-fit 在 flexbox 中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！