【发布时间】：2016-06-23 13:37:05
【问题描述】：
我正在开发一个响应式画廊布局，其中所有图像都应覆盖其容器的尺寸。为了保持每个图像的纵横比，我认为我可以使用相当新的 CSS 属性object-fit。
实施的解决方案使用flexbox 模块强制画廊的每一列的高度相等。每列中的单元格都被拉伸以适应其父级的高度。每个单元格的实际高度由flexbox模块使用flex: 1 0 auto确定，不一定相同。
这是我的问题：每个单元格中包含的图像现在应该与其容器的尺寸相匹配（使用object-fit: cover; width: 100%; height: 100%）。在 Firefox 和 Internet Explorer（使用 object-fit polyfill）中，这些样式会产生预期的布局，但在 Chrome 或 Safari 等 webkit 浏览器中则不行。在这些浏览器中，每个单元格的尺寸都是正确的，但图像的尺寸不正确。
我找不到相关的错误报告，也找不到针对我的问题的灵活解决方案。我希望有人可以帮助我，因为我目前没有想法。
在最新版本的 Chrome、Safari、Firefox 和 IE 10 和 11 中测试
// Object Fit Polyfill
// @see <https://github.com/bfred-it/object-fit-images>
objectFitImages();/* Reset */
body {
font: 100%/26px Lato, sans-serif;
padding: 5%;
}
figure {
margin: 0;
}
blockquote {
margin-left: 0;
}
img {
vertical-align: middle;
max-width: 100%;
height: auto;
font-style: italic;
}
/* Gallery */
.c-gallery {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: wrap row;
-ms-flex-flow: wrap row;
flex-flow: wrap row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.c-gallery__column {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: wrap column;
-ms-flex-flow: wrap column;
flex-flow: wrap column;
-webkit-box-flex: 1;
-webkit-flex: 1 0 33%;
-ms-flex: 1 0 33%;
flex: 1 0 33%;
}
.c-gallery__item {
-webkit-box-flex: 1;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.c-gallery__item img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}<div class="c-gallery">
<div class="c-gallery__column">
<figure class="c-gallery__item">
<a href="#"><img src="http://placehold.it/640x1080" alt="Product A" /></a>
</figure>
</div>
<div class="c-gallery__column">
<div class="c-gallery__item">
<figure>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis architecto voluptatum numquam totam quos neque incidunt!</p>
</blockquote>
<figcaption>
<cite>John Doe</cite>
</figcaption>
</figure>
</div>
<figure class="c-gallery__item">
<img src="http://placehold.it/640x720" alt="John Doe" />
</figure>
</div>
<div class="c-gallery__column">
<figure class="c-gallery__item">
<a href="#"><img src="http://placehold.it/640x360" alt="Product B" /></a>
</figure>
<figure class="c-gallery__item">
<a href="#"><img src="http://placehold.it/640x360" alt="Product C" /></a>
</figure>
<figure class="c-gallery__item">
<a href="#"><img src="http://placehold.it/640x360" alt="Product D" /></a>
</figure>
</div>
</div>
<script src="http://bfred-it.github.io/object-fit-images/dist/ofi.browser.js"></script>如果您更喜欢 CodePen，我创建了一个我正在工作的演示：
【问题讨论】：
-
object-fit不能使用固定尺寸吗？所以让它max-width和max-height，也许吧。我不确定，因为您使用的是多边形。 -
不再需要 Flexbox 前缀-CanIUse 有很多过时的 flexbox 属性...也许可以简化为大多数当前的 flexbox 语法？再一次，我不确定需要什么...我不信任政策。
-
@Michael_B 图片需要包裹在锚链接中，因为它们会链接到产品页面。我已经尝试制作这些
display: flex; flex-flow: nowrap column; flex: 1 0 100%;以确保它们与图形的高度相匹配，但这并没有改变任何东西。 -
@zer00ne IE 10/11 需要供应商前缀。 polyfill 也主要用于 IE。您能否进一步详细说明“不适合固定尺寸的对象”是什么意思？
标签： css flexbox image-gallery