对象拟合不影响图像 [英] Object-fit not affecting images

问题描述

我一直试图在 article 元素中放置的一些图片上使用 object-fit ，但它似乎没有影响他们。

I've been trying to use object-fit on a few images placed inside article elements, but it doesn't seem to affect them at all.

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

The desired value for the object-fit property would be cover, but as of right now, none of the other values seem to work either.

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

When I change it's value, they don't shrink, don't grow, don't ... nothing.

如果看到CodePen，则两行之间会有空格，并且图像不占用所有相同的空间/高度（正如对象适合：封面所预期的那样）。

If you see the CodePen, there are white spaces between the two rows, and the images don't take all the same space/height (as it would be expected with 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>

推荐答案

对象适用于替换的内容。这意味着，当图像加载到页面上时，实际图像会被替换。图像标记内的内容基于对象适合属性应用。这与我的容器无关。

Object-fit applies to the replaced content. What that means is, when the image loads on page, the actual image gets replaced. That content inside of the image tag applies based on the object fit property. This is independent of the I'm container.

使用img标签替换文章对象应该会使图像与弹性框一起拉伸并适当填充。

Replacing the article object with your img tags should cause the images to stretch with your flex box and fill appropriately.

http://jsfiddle.net/o2fx87ws/

    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>

这篇关于对象拟合不影响图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！