对象适合不影响图像

Question

我一直在尝试使用object-fit放置在article元素内部的一些图像,但它似乎根本不会影响它们.

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

Answer 1

为了object-fit工作,图像本身需要一个width和height.在OP的CSS中,图像没有设置宽度和/或高度,因此对象适合不起作用.

线索: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.

Answer 2

对象飞度

object-fit CSS属性设置如何调整替换元素(如a <img>或<video>)的内容以调整其容器的大小.

替换元素

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

这意味着对象拟合与article标记无关,因为对象拟合仅关注img标记的维度.

您还可以通过单击object-fit的链接来查看下面的示例.

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

关键在于您需要首先将img标签拉伸到这些尺寸.该object-fit只影响画面显示内的道路img边界.

解决方案1:更灵活

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

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

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

解决方案2:删除文章标签

或者您可以重构html以删除article标签并弯曲img标签.

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

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

Answer 3

这是规范中说的内容:

5.5.调整对象:object-fit 属性

该object-fit属性指定如何将替换元素的内容拟合到由其使用的高度和宽度建立的框中.

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

因此,我增加height和width属性的img元素,似乎现在的工作.

修改了Codepen

要删除每个图像下的微小空白行,请添加vertical-align: bottom到img.有关解释,请参阅此处:图像标记下方的神秘空白区域

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

1. object-fit (没有IE支持;有限的Safari支持)
2. main (没有IE支持)
3. flexbox(考虑前缀)

Answer 4

我遇到了类似的问题，对象拟合不起作用。我在图像中添加了 max-width 并且它起作用了。

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

Answer 5

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

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