Html 对象适合不影响图像

Question

提问by P3t3r6

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

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

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

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

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

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

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，两行之间有空格，并且图像不会占用所有相同的空间/高度（正如预期的那样object-fit: cover）。

Here's a CodePen

这是一个 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

采纳答案by teynon

Object-Fit

对象匹配

The object-fit CSS property sets how the content of a replaced element, such as an <img>or <video>, should be resized to fit its container.

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

Replaced Element

替换元素

elements whose contents are not affected by the current document's styles. The position of the replaced element can be affected using CSS, but not the contents of the replaced element itself.

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

This means that the object-fit is independent of your articleelements as object-fit only cares about the dimensions of the img element.

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

The point of this is that you need to get the imgelements to stretch to those dimensions first. The object-fitonly affects the way the picture displays inside of the imgboundaries.

关键是您需要先让img元素拉伸到这些尺寸。该object-fit只影响方式的画面显示内img边界。

Sample Code / Demonstration

示例代码/演示

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

Solutions to Question

问题解答

Solution 1: More flex

解决方案 1：更灵活

Using your current HTML structure you can use the snippet below to apply an additional flex inside of each article.

使用您当前的 HTML 结构，您可以使用下面的代码段在每个article.

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

Solution 2: Remove article elements

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

Or you could restructure your html to remove the articleelements and flex the imgelements.

或者您可以重组您的 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>

Answer 2

回答by The Conspiracy

For object-fitto work, the image itself needs a widthand height. In the OP's CSS, the images do not have width and/or height set, thus object-fit cannot work.

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

The clue: widthand heightneed NOT be the dimensions of the image itself!Think of it as if it were a div: If you want a divto fill its container, you will set

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

width:100%; height:100%;

...and the browser will know that this div should completely fill its container's space.

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

In case of an img, the browser performs two steps:

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

The browser creates a bounding box: By default, the box dimensions will be the exact dimensions of the image itself. But we're free to tell the browser to size the image to 100% of its container's width and 100% of its container's height. Then it will create a box that completely fills the container's space.
The browser fits the image pixels into this box: By default, the image will be squeezed/stretched so the image width matches the box width, and the image height matches the box height. But using object-fit, you can select how to match image and box dimensions. For example, using object-fit:covercommands to enlarge/downsize the image to completely fill the box while maintaining its aspect ratio.

浏览器创建一个边界框：默认情况下，框尺寸将是图像本身的精确尺寸。但是我们可以自由地告诉浏览器将图像的大小调整为其容器宽度的 100% 和容器高度的 100%。然后它会创建一个完全填满容器空间的盒子。
浏览器将图像像素放入此框中：默认情况下，图像将被挤压/拉伸，因此图像宽度与框宽度匹配，图像高度与框高度匹配。但是使用object-fit，您可以选择如何匹配图像和框尺寸。例如，使用object-fit:cover命令放大/缩小图像以完全填充框，同时保持其纵横比。

Regarding the OP, I would simply set:

关于 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 */
}

One final caveat: When using % values for sizing, the container must have a defined width and height for object-fit to work. OP would need to define heightin main > section.posts > article.

最后一个警告：当使用 % 值进行大小调整时，容器必须具有定义的宽度和高度才能使对象适合工作。OP 需要height在main > section.posts > article.

Answer 3

回答by Michael Benjamin

Here's what is says in the spec:

这是规范中的内容：

5.5. Sizing Objects: the object-fitproperty
The object-fitproperty specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

5.5. 调整对象大小：object-fit属性
该object-fit属性指定被替换元素的内容应如何适合由其使用的高度和宽度建立的框。

I focused on... fitted to the box established by its used height and width.

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

So I added heightand widthattributes to your imgelements, and it seems to work now.

所以我在你的元素中添加了height和width属性img，现在它似乎可以工作了。

Revised Codepen

修订代码笔

To remove the tiny line of whitespace under each image, add vertical-align: bottomto the img. For an explanation see here: Mystery white space underneath image tag

要删除每个图像下的细小的空白行，请添加vertical-align: bottom到img. 有关解释，请参见此处：图像标签下方的神秘空白

As a side note, you may want to consider browser support for:

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

object-fit(no IE support)
main(no IE support)
flexbox(consider prefixes)

object-fit（不支持 IE）
main（不支持 IE）
flexbox（考虑前缀）

Answer 4

回答by zer00ne

I changed the container, image and the parent of the container to box-sizing: content-boxsince img is replaced and switched the object-fit: coveron the container instead of the img. Since img is expected to be cropped, a height of 100vh and a width of 100% and +22hw offset worked good on the top four, there seems to be a little distortion both the bottom two img, not much. object-positionstill doesn't work for me (never does) :-\

我更改了容器、图像和容器的父级，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 5

回答by Alfrex92

I had a similar problem where object fit was not working. I added max-width to the image and it worked.

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

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

Html 对象适合不影响图像

提问by P3t3r6

采纳答案by teynon

Sample Code / Demonstration

示例代码/演示

Solutions to Question

问题解答

回答by The Conspiracy

回答by Michael Benjamin

回答by zer00ne

回答by Alfrex92

相关推荐

最近更新

标签

Html 对象适合不影响图像

提问by P3t3r6

采纳答案by teynon

Sample Code / Demonstration

示例代码/演示

Solutions to Question

问题解答

回答by The Conspiracy

回答by Michael Benjamin

回答by zer00ne

回答by Alfrex92

相关推荐

Html 当 flexbox 项目以列模式换行时，容器不会增加其宽度

Html 带有文件名的下载属性不起作用？

Html <br> 是否有任何 ASCII 字符？

Html html5中<article>和<section>有什么区别

相关推荐

最近更新

标签