Question

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

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

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

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

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>

Answer 1

以下是规范中的内容：

5.5. Sizing Objects: the object-fit property

object-fit属性指定替换内容的方式   元素应安装在由其使用的高度和   宽度。

我专注于... 适合由其使用的高度和宽度建立的盒子。

所以我将height和width属性添加到了您的img元素中，现在似乎可以正常工作。

Revised Codepen

要移除每张图片下的微小空白行，请将vertical-align: bottom添加到img。有关解释，请参阅此处：Mystery white space underneath image tag

作为旁注，您可能需要考虑浏览器支持：

object-fit（没有IE支持;有限的Safari支持）
main（没有IE支持）
flexbox（考虑前缀）

Answer 2

要使object-fit工作，图像本身需要width和height。在OP的CSS中，未设置图片的宽度和/或高度，因此无法进行对象适配。

提示：width和height不必是图像本身的尺寸！可以将其视为div：如果想要div填充其容器，您将设置

width:100%; height:100%;

...并且浏览器将知道此div应该完全填充其容器的空间。

对于img，浏览器执行两个步骤：

浏览器创建一个边界框：默认情况下，框的尺寸将是图像本身的确切尺寸。但是，我们可以随意告诉浏览器将图像的大小调整为容器宽度的100％和容器高度的100％。然后，它将创建一个完全填充容器空间的框。
浏览器使图像像素适合此框：默认情况下，图像会被压缩/拉伸，因此图像宽度与框宽度匹配，而图像高度与框高匹配。但是使用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。

Answer 3

Object-Fit

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

Replaced Element

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

这意味着对象拟合独立于article元素，因为对象拟合只关心img元素的维度。

您还可以点击object-fit的链接

，查看下面的示例

＆＃13;

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

＆＃13;

<h1>Normal</h1>
<img src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg" />

<h1>fill</h1>
<img src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg" class="fill" />

<h1>contain</h1>
<img src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg" class="contain" />

<h1>cover</h1>
<img src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg" class="cover" />

<h1>none</h1>
<img src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg" class="none" />

<h1>scale-down</h1>
<img src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg" class="scaledown" />

＆＃13;

要点是，您需要先将img元素拉伸到这些尺寸。 object-fit仅影响图片在img边界内显示的方式。

解决方案1：更灵活

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

＆＃13;

//
//   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;
}

＆＃13;

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

＆＃13;

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

或者您可以重新构建html以删除article元素并展开img元素。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

我发现了一个非常简单的技巧，对我来说效果最好，但首先要感谢 Tenyon 从他的回答中获得灵感。

你可以简单地将 img 元素放在你想要的任何大小的 div 元素中，然后给你的图像宽度和高度继承，然后给它你想要的任何对象适合值，它会完美地工作。

Answer 5

我将容器，图像和容器的父级更改为box-sizing: content-box，因为img已被替换并切换容器上的object-fit: cover而不是img。由于img预计将被裁剪，高度为100vh，宽度为100％，+ 22hw偏移在前四位上表现良好，底部两个img似乎有一点变形，并不多。 object-position仍然无法为我工作（从未这样做）： - \

http://codepen.io/01/pen/zrvdaz?editors=110

body{
    margin: 0 auto; padding: 0;
}
main{
    min-height: 70vh;
    padding: 0;
}
main > section.posts{
    box-sizing: content-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:content-box;
  object-fit: cover;

}
main > section.posts > article > img{
 display: block;
  box-sizing:content-box;
  max-height: 100vh;
  width: calc(100% + 22vh);
  object-position: 100% 100%;
}

Answer 6

我遇到了一个类似的问题，即对象适配无法正常工作。我在图片上添加了max-width，效果很好。

.myImg {
    object-fit: cover;
    max-width: 100%;
    object-position: center;
}

对象适合不影响图像

6 个答案: