html - 为什么 flex 元素的宽度和高度会影响 flex 元素的呈现方式？

Question

flexbox 中具有 max-height 样式的图像呈现方式不同，具体取决于它是否具有 height 和 width 属性设置。

有属性的，设置为图像的真实宽度/高度，呈现时保留其宽高比，但没有属性的那些尊重max-height 并且看起来被压扁了。

.flex-parent {
  display: flex;
  max-height: 10vh;
}

<div class="flex-parent">
  <img                          src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
  <img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
</div>

这就是它在 Chrome 58 中的显示方式(它在 Firefox 54 中的显示方式类似)。

为什么它们呈现不同？管理这种行为的规则是什么？

我(显然不正确)的理解是，高度和宽度属性会覆盖图像加载时发现的固有高度和宽度，如果高度和宽度属性等于图像的尺寸，则渲染应该没有差异加载图像后。

上下文是制作一个带有响应图像的页面，其中每个图像

• 可以有独特的原始尺寸
• 加载时不会导致回流，即在初始渲染时保留正确的空间(因此使用高度和宽度属性)
• 可以一次全部显示在屏幕上(因此我搞乱了 CSS 中的 vh)

---

Frog 图片来自https://en.wikipedia.org/wiki/File:Red_eyed_tree_frog_edit2.jpg

Answer 1

flex 容器的初始设置是 align-items: stretch .

这意味着 flex 元素将扩展到 cross axis容器。

在行方向容器中，如问题中，横轴是垂直的。

这意味着元素(在本例中为图像)将覆盖容器的整个高度。

但是，当 flex 元素具有定义的交叉尺寸时，它会覆盖 stretch 默认值。

来自规范:

8.3. Cross-axis Alignment: the align-items and align-self properties

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction.

stretch

If the cross size property of the flex item computes to auto, and neither of the cross-axis margins are auto, the flex item is stretched.

这是关键语言:

If the cross size property of the flex item computes to auto

这就是规范定义“交叉尺寸属性”的方式:

The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size. The cross size property is whichever of width or height that is in the cross dimension.

^{https://www.w3.org/TR/css-flexbox-1/#cross-size-property}

---

因此您的代码似乎按照规范中的定义运行。

这就是你拥有的:

.flex-parent {
  display: flex;
  max-height: 10vh;
}

<div class="flex-parent">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
  <img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
</div>

第一张图片 在 CSS 或 HTML 中都没有定义宽度(主要尺寸)或高度(横向尺寸)。因此，它的交叉大小计算为 auto。

这个声明:

If the cross size property of the flex item computes to auto

... 为真，align-items: stretch 生效。

图像扩展到容器的高度，即 10px。

第二张图片，但是，有明确的大小。横向尺寸在 HTML 中定义 (height="240")。

现在声明:

If the cross size property of the flex item computes to auto

... 为假，align-items: stretch 被覆盖。以 HTML height 属性为准。

关于第二张图片的两个注释:

1. 图像忽略了容器的 max-height 限制，因为 CSS 中的初始设置是 overflow: visible .
2. HTML width 和 height 属性映射到它们各自的 CSS 属性。因此，height="240" 覆盖了 height: auto 默认值。请参阅下面的规范引用。*

---

在 flex 容器中渲染图像时，还有两个问题需要考虑。

1. flex 元素的默认最小尺寸。此设置可防止 flex 元素缩小到低于其内容的大小。阅读这篇文章了解全部详情:

   • Why doesn't flex item shrink past content size?

2. 主要浏览器之间的不同行为。 Firefox、Chrome、Safari、Edge 和 IE11 并不总是以相同的方式将图像呈现为 flex 元素。阅读这篇文章了解更多详情:

   • Flex in Firefox shrinks images automatically, but not in Chrome

---

考虑到上述所有因素，这是我建议的解决方案:

.flex-parent {
  display: flex;
  max-height: 50vh; /* adjusted for demo */
}

.flex-parent {
  min-width: 0;
}

img {
  width: 100%;
  height: auto;
}

<div class="flex-parent">
  <div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
  </div>
  <div>
    <img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
  </div>
</div>

---

*HTML width 和 height 属性映射到它们各自的 CSS 属性。因此，在指定时，它们会覆盖 CSS 默认值。来自 HTML5 规范:

10.4.3 Attributes for embedded content and images

The width and height attributes on applet, embed, iframe, object or video elements, and input elements with a type attribute in the Image Button state and that either represents an image or that the user expects will eventually represent an image, map to the dimension properties width and height on the element respectively.

10.2 The CSS user agent style sheet and presentational hints

When the text below says that an attribute on an element maps to the dimension property (or properties), it means that if the element has an attribute set, and parsing that attribute's value using the rules for parsing dimension values doesn't generate an error, then the user agent is expected to use the parsed dimension as the value for a presentational hint for properties, with the value given as a pixel length if the dimension was an integer, and with the value given as a percentage if the dimension was a percentage.