了解适合对象的CSS属性 [英] Understanding object-fit CSS property

问题描述

在此文章中，我们可以阅读:

In this article we can read:

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

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.

在这种情况下，容器是什么意思?

What does container mean in this case?

父元素?包含块?

推荐答案

来自

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

因此它既不是父元素也不是包含块，而是元素本身.这是元素与其内容之间的关系. object-fit 根据元素的尺寸更改内容的行为.

So it's neither the parent element nor the containing block but the element itself. It's a relation between the element and it's content. object-fit change the behavior of the content based on the dimension of the element.

不同元素共享同一包含块的示例:

Example with different elements sharing the same containing block:

img {
  object-fit: cover;
  border: 2px solid;
  width: 200px;
  height: 200px
}

<img src="https://picsum.photos/id/10/500/400">
<img src="https://picsum.photos/id/10/800/400">
<img src="https://picsum.photos/id/10/500/1000">
<img src="https://picsum.photos/id/10/600/300">

在上述所有情况下， object-fit 将尝试覆盖由应用于元素的宽度/高度所定义的 200x200 区域.包含的块/父元素在这里无关紧要，不起作用.

In all the above cases, the object-fit will try to cover the 200x200 area desfined by the width/height applied to the element. The containing block/parent element is irrelevant here and play no role.

在同一规范中，您还可以阅读关键字内容框"，或元素的内容框"这是您要查找的容器.

In the same specification you can also read the keyword "the content box" or "element's content box" which is the container your are looking for.

相关:

对象适配如何与画布元素一起工作?

CSS对象适合:包含；在布局中保持原始图像宽度

这篇关于了解适合对象的CSS属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！