问题 对象拟合不影响图像

我一直在尝试使用 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>

6364

2017-12-13 02:21

起源

嗨，首先，谢谢你的时间:)我的问题是，对象适合似乎没有在图像上做任何事情。当我改变它的值时，它们不会缩小，不会增长，不会......没有......如果你看到CodePen，那么两行之间会有空白区域，并且图像不会占用所有相同的空间/高度（正如预期的那样） object-fit: cover ）。 - P3t3r6

我从来没有使用过对象，我认为它不适用于我目前的移动Chrome浏览器，但从我读过的内容来看，这似乎适用于图像本身而不是图像容器。因此，如果您指定图像的宽度和高度，您可能会得到您想要的。因此，在您的情况下，也许使Flex可以使用图像而不是文章 - teynon

jsfiddle.net/o2fx87ws 在我的手机上所以这有点难写 - teynon

可能重复适合背景图像到div - Alvaro Joao

@alvarojoao这与将图像拟合到div的概念并不相同。对象拟合与图像在给定空间中的呈现方式有关 - teynon

答案:

object-fit 适用于替换的内容。这意味着当图像加载到页面上时，实际图像会被替换。图像标签内的内容适用于 object-fit 属性。这是 独立于图像容器。

用img标签替换article对象应该会使图像在弹性框中拉伸并适当填充。

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>

2017-12-13 03:04

这是规范中说的内容：

5.5。调整对象： object-fit 属性

该 object-fit property指定如何替换的内容元件应安装在由其使用高度和宽度。

我专注于...... 安装在由其使用的高度和宽度确定的盒子上。

所以我补充道 height 和 width 你的属性 img 元素，它现在似乎工作。

修改了Codepen

要删除每个图像下的微小空白行，请添加 vertical-align: bottom 到了 img。有关解释，请参阅此处：在图象标记下的奥秘白色空间

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

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

2017-12-13 02:51

仍然不适合我：/那不会太可维护，因为我不知道未来的图像尺寸。谢谢你反正:) - P3t3r6

该演示在这方面工作正常。此外，在我见过的所有例子中（MDN，Opera等），图像都有一个定义的高度和宽度。我明白这不适合你，但它可能是一个要求 object-fit 上班。 - Michael_B

我将容器，图像和容器的父级更改为 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%;
}

2017-12-13 03:17

问题对象拟合不影响图像

答案:

热门问题

问题 对象拟合不影响图像

答案:

热门问题

问题对象拟合不影响图像