为什么弹性项目的宽度和高度会影响弹性项目的呈现方式？

Question

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

具有属性的图像，设置为图像的真实width/height，呈现时保留其宽高比，但没有属性的图像尊重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 中的显示方式类似）。

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

我（显然不正确）的理解是高度和宽度属性会覆盖图像加载时发现的固有高度和宽度，如果高度和宽度属性等于图像的尺寸，则应该没有区别在图像加载后进行渲染。

上下文正在制作一个包含响应图像的页面，其中每个图像

可以有独特的原始尺寸
加载时不会导致重排，即正确的 space 在初始渲染时保留（因此使用高度和宽度属性）
可以一次显示所有内容（因此我在 CSS 中弄乱了 vh）

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

Answer 1

弹性容器的初始设置是align-items: stretch。

这意味着弹性项目将扩展到容器的。

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

这意味着项目（在本例中为图像）将覆盖容器的整个高度。

但是，当弹性项目具有定义的横向尺寸时，它会覆盖 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

规范是这样定义的 "cross size property":

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生效。

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

但是，

第二张图片 具有明确的尺寸。交叉尺寸在 HTML (height="240").

中定义

现在这个声明：

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

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

关于第二张图片的两点说明：

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

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

弹性项目的默认最小尺寸。此设置可防止弹性项目缩小到低于其内容的大小。阅读此 post 了解完整详情：
主要浏览器的不同行为。 Firefox、Chrome、Safari、Edge 和 IE11 并不总是以相同的方式将图像呈现为 flex 项目。阅读此 post 了解更多详情：

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

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

Answer 2

尝试阅读 w3c flexbox 规范并偶然发现 this。它说

For each dimension, if that dimension of the flex container’s content box is a definite size, use that; if that dimension of the flex container is being sized under a min or max-content constraint, the available space in that dimension is that constraint.

Otherwise, subtract the flex container’s margin, border, and padding from the space available to the flex container in that dimension and use that value which might result in an infinite value.

希望对您有所帮助。

Answer 3

这里你写了 max-height:10vh，除了最新的浏览器外，vh 不支持任何浏览器 iOS 6. 这适用于所有与视口相关的长度单位。使用其他值而不是 Vh 这将正常工作。请阅读此博客 https://css-tricks.com/the-lengths-of-css/。

.flex-parent {
  display: flex;
  max-height:  max-content;
}

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

Answer 4

问题出在你设置最大高度的地方。默认情况下不继承 css 属性最大高度。您的 css 声明创建了一个 div，它是视口高度的 10%。没有尺寸设置的图像根据其父尺寸缩小。您设置隐式尺寸的图像将始终是那些尺寸。根据 div 的大小，它可能会溢出。如果您将最大高度属性放在第一张图片上，它应该调整大小以保持纵横比不变。

为什么弹性项目的宽度和高度会影响弹性项目的呈现方式？

Why does width and height of a flex item affect how a flex item is rendered?

html

css

flexbox

responsive-images