对象适合不影响图像

Question

我一直在尝试在放置在 article 元素中的一些图像上使用 object-fit ，但它似乎根本不会影响它们。

object-fit 属性的期望值为 cover ，但截至目前，其他值似乎都不起作用。

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

如果您看到 CodePen，则两行之间有空白，并且图像不会占用所有相同的空间/高度（正如 object-fit: cover 所预期的那样）。

这是一个 CodePen

 body{
	margin: 0 auto; padding: 0;
}
main{
	min-height: 70vh;
	padding: 0;
}
main > section.posts{
	box-sizing: border-box;
	margin: 0; padding: 0;
	display: flex;
	flex-flow: row wrap;
}
main > section.posts > article{
  outline: 1px solid red;
	width: 22vw;
	min-height: 100vh;
	margin: 0; padding: 0;
	flex-grow: 1;
	overflow: hidden;
	box-sizing: border-box;
}
main > section.posts > article > img{  /* Our suspect */
  object-fit: cover;
}

 <!--
Basic structure of this file is

<main>
  <section.posts>
      <article> (six of them)
          <image>
-->

<main>
  <section class="posts">
    <article>
      <img src="http://41.media.tumblr.com/tumblr_m6s6d65lE11qdnz8wo1_400.jpg">
    </article>

    <article>
      <img src="http://41.media.tumblr.com/71c1fe7c899cd048fb961d3c1953411b/tumblr_nj24pvINyW1qzq8p3o1_400.jpg">
    </article>

    <article>
      <img src="http://36.media.tumblr.com/3358cb6ac8eaa0e61dffd53bc1bab93d/tumblr_n92l475hol1qlmppmo1_400.png">
    </article>

    <article>
      <img src="http://36.media.tumblr.com/9ad997ca0385a23a8d82ec919da2392c/tumblr_nwcewbFVAL1s71gzco1_400.jpg">
    </article>

    <article>
      <img src="http://41.media.tumblr.com/tumblr_mbl45xDSwj1qfn79co1_400.jpg">
    </article>

    <article>
      <img src="http://41.media.tumblr.com/1c3718e71a2aa5acaaaf4af654991c91/tumblr_nx6psaH67d1tvh80lo1_400.jpg">
    </article>
  </section>
</main>

原文由 P3t3r6 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

object-fit 只影响图片在 img 边界内的显示方式。

对象拟合

object-fit CSS 属性设置替换元素的内容（例如 <img> 或 <video> ）应如何调整大小以适合其容器。

替换元素

其内容不受当前文档样式影响的元素。使用 CSS 可以影响被替换元素的位置，但不会影响被替换元素本身的内容。

这意味着 object-fit 独立于您的 article 元素，因为 object-fit 只关心 img 元素的尺寸。

这样做的要点是您需要先获取 img 元素以拉伸到这些维度。 object-fit 仅影响图片在 img 边界内的显示方式。

示例代码/演示

 $(function() { $("img").resizable(); });

 img {
  width: 300px;
  height: 300px;
  border: 1px solid #FF0000;
  background-color: #00FF00;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}
.cover {
  object-fit: cover;
}
.none {
  object-fit: none;
}
.scaledown {
  object-fit: scale-down;
}

.variant1 {
  max-width: 100px;
}

.variant2 {
  max-height: 100px;
}

 <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<p>Resize images to see properties with different dimensions.</p>

<h1>fill (default)</h1>
<img src="https://i.stack.imgur.com/EtYb2.jpg" class="fill" />

<h1>contain</h1>
<img src="https://i.stack.imgur.com/EtYb2.jpg" class="contain" />

<h1>cover</h1>
<img src="https://i.stack.imgur.com/EtYb2.jpg" class="cover" />

<h1>none</h1>
<img src="https://i.stack.imgur.com/EtYb2.jpg" class="none" />

<h1>scale-down</h1>
<img src="https://i.stack.imgur.com/EtYb2.jpg" class="scaledown" />
<!-- Spacer for scale down scroll annoyance -->
<br /><br /><br /><br /><br /><br /><br />

问题解答

解决方案 1：更灵活

使用您当前的 HTML 结构，您可以使用下面的代码片段在每个 article 中应用一个额外的 flex。

 //
//   Image styles are near the end of file
//   (Line 28)
//

body{
    margin: 0 auto; padding: 0;
}
main{
    min-height: 70vh;
    padding: 0;
}
main > section.posts{
    box-sizing: border-box;
    margin: 0; padding: 0;
    display: flex;
  align-content: stretch;
    flex-flow: row wrap;
}
main > section.posts > article{
  outline: 1px solid red;
    width: 22vw;
    min-height: 100vh;
    margin: 0; padding: 0;
    flex-grow: 1;
    overflow: hidden;
    box-sizing: border-box;
  display: flex;
  align-content: stretch;
  align-items: stretch;
}
main > section.posts > article > img{
  object-fit: cover;
  flex: 1;
}

 <!--
Basic structure of this file is

<main>
  <section.posts>
      <article> (six of them)
          <image>
-->

<main>
  <section class="posts">
    <article>
      <img src="https://41.media.tumblr.com/tumblr_m6s6d65lE11qdnz8wo1_400.jpg">
    </article>

    <article>
      <img src="https://41.media.tumblr.com/71c1fe7c899cd048fb961d3c1953411b/tumblr_nj24pvINyW1qzq8p3o1_400.jpg">
    </article>

    <article>
      <img src="https://36.media.tumblr.com/3358cb6ac8eaa0e61dffd53bc1bab93d/tumblr_n92l475hol1qlmppmo1_400.png">
    </article>

    <article>
      <img src="https://36.media.tumblr.com/9ad997ca0385a23a8d82ec919da2392c/tumblr_nwcewbFVAL1s71gzco1_400.jpg">
    </article>

    <article>
      <img src="https://41.media.tumblr.com/tumblr_mbl45xDSwj1qfn79co1_400.jpg">
    </article>

    <article>
      <img src="https://41.media.tumblr.com/1c3718e71a2aa5acaaaf4af654991c91/tumblr_nx6psaH67d1tvh80lo1_400.jpg">
    </article>
  </section>
</main>

解决方案 2：删除文章元素

或者您可以重组您的 html 以删除 article 元素并调整 img 元素。

     body{
        margin: 0 auto; padding: 0;
    }
    main{
        min-height: 70vh;
        padding: 0;
    }
    main > section.posts{
        box-sizing: border-box;
        margin: 0; padding: 0;
        display: flex;
        flex-flow: row wrap;
    }
    main > section.posts > img{
      outline: 1px solid red;
        width: 22vw;
        min-height: 100vh;
        margin: 0; padding: 0;
        flex-grow: 1;
        overflow: hidden;
        box-sizing: border-box;
    }
    main > section.posts  > img{  /* Our suspect */
      object-fit: cover;
    }

     <main>
      <section class="posts">

          <img src="http://41.media.tumblr.com/tumblr_m6s6d65lE11qdnz8wo1_400.jpg">

          <img src="http://41.media.tumblr.com/71c1fe7c899cd048fb961d3c1953411b/tumblr_nj24pvINyW1qzq8p3o1_400.jpg">



          <img src="http://36.media.tumblr.com/3358cb6ac8eaa0e61dffd53bc1bab93d/tumblr_n92l475hol1qlmppmo1_400.png">



          <img src="http://36.media.tumblr.com/9ad997ca0385a23a8d82ec919da2392c/tumblr_nwcewbFVAL1s71gzco1_400.jpg">



          <img src="http://41.media.tumblr.com/tumblr_mbl45xDSwj1qfn79co1_400.jpg">



          <img src="http://41.media.tumblr.com/1c3718e71a2aa5acaaaf4af654991c91/tumblr_nx6psaH67d1tvh80lo1_400.jpg">

      </section>
    </main>

原文由 teynon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于 object-fit 工作，图像本身需要 width 和 height 。在 OP 的 CSS 中，图像没有设置宽度和/或高度，因此 object-fit 无法工作。

线索： width 和 height 不一定是图像本身的尺寸！ 把它想象成一个 div ：如果你想要一个 div 来填充它的容器，你将设置

width:100%; height:100%;

…并且浏览器会知道这个 div 应该完全填满它的容器空间。

在 img 的情况下，浏览器执行两个步骤：

1. 浏览器 创建一个边界框：默认情况下，框尺寸将是图像本身的精确尺寸。但是我们可以自由地告诉浏览器将图像的大小调整为其容器宽度的 100% 和容器高度的 100%。然后它将创建一个完全填满容器空间的盒子。
2. 浏览 器使图像像素适合此框：默认情况下，图像将被压缩/拉伸，因此 _图像宽度与框宽度匹配_， _图像高度与框高度匹配_。但使用 object-fit ，您可以选择 如何匹配图像和框尺寸。例如，使用 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 需要在 height main > section.posts > article 。

原文由 The Conspiracy 发布，翻译遵循 CC BY-SA 4.0 许可协议