为什么Flexbox中没有对象适配的工作？ [英] Why isn't object-fit working in flexbox?

问题描述

我有几个列，我使用flex给予相等的宽度。每个都包含 img 标签，我希望这些图像展示 object-fit：cover p>

  .container {display：flex; flex-direction：row; width：100％;}。 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>  

图片未调整大小，如此演示。为什么？

解决方案

从 specification ：

object-fit 属性指定如何将替换的
元素的内容适配到由其已用高度和
宽度建立的框中。

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

图像被替换，而不是它的容器。

因此，废弃容器，使图像本身成为flex项目。

/ p>

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

 < div class = > < 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>  

修订的Codepen

---

附加详情

5.5。调整对象大小：对象适合
属性

code> object-fit 属性指定如何将替换的
元素的内容适配到由其使用的高度和
宽度建立的框中。

以下是三个值：

• cover

  
  
  

  替换内容的大小可以保持其长宽比，而$ b $




• 包含 >
  
  

  替换后的内容的大小可以保持其长宽比，而
  则适合在元素的内容框中。



• p> fill
  
  
  

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







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

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

使用



---

=nofollow> Internet Explorer不支持 object-fit 。有关变通方法，请参阅：

• CSS的整洁技巧 object-fit 其他浏览器）


• fitie - An object-fit polyfill for Internet Explorer


• object-fit-images - 在IE9，IE10，IE11，Edge和其他旧版浏览器中添加 object-fit


• 用于CSS 对象的Polyfill（主要是IE） -fit 属性将

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 object-fit property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

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

5.5. Sizing Objects: the object-fit property

The object-fit property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

Here are three of the values:

• cover

  The replaced content is sized to maintain its aspect ratio while filling the element's entire content box.

• contain

  The replaced content is sized to maintain its aspect ratio while fitting within the element's content box.

• fill

  The replaced content is sized to fill the element's content box.

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.

这篇关于为什么Flexbox中没有对象适配的工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！