为什么弹性项的宽度和高度会影响弹性项的渲染方式？

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 ）

---

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

Answer 1

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

这意味着flex项目将跨容器的横轴扩展。

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

这意味着物品（图像，在这种情况下）将覆盖容器的整个高度。

但是，当弹性项具有已定义的交叉大小时，将覆盖stretch默认值。

从规格：

8.3。 Cross-axis Alignment： align-items和align-self属性

Flex项目可以在Flex容器的当前行的交叉轴上对齐，类似于justify-content但是在垂直方向上。

stretch

如果flex项的cross size属性计算为auto ，并且两个横轴边距都不是auto ，则会拉伸flex项。

这是关键语言：

如果flex项的cross size属性计算为auto

这就是规范定义“交叉大小属性”的方式：

Flex项目的宽度或高度（以交叉维度中的任何一个为单位）是项目的交叉大小 。 十字尺寸属性是横向尺寸中的width或height中的任何一个。

^{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 。

这个说法：

如果flex项的cross size属性计算为auto

...是真的，并且align-items: stretch生效。

图像在容器的高度上扩展，为10px。

但是， 第二张图像具有明确的尺寸。 交叉大小在HTML（ height="240" ）中定义。

现在这句话：

如果flex项的cross size属性计算为auto

...是false，并且align-items: stretch被覆盖。 HTML height属性占优势。

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

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

---

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

1. 弹性项目的默认最小大小。 此设置可防止弹性项目缩小到其内容大小以下。 阅读这篇文章了解详情：

   • 为什么flex项目不会缩小内容大小？

2. 主流浏览器之间的变化行为。 Firefox，Chrome，Safari，Edge和IE11并不总是以相同的方式将图像渲染为弹性项目。 阅读这篇文章了解更多详情：

   • Firefox中的Flex会自动缩小图像，但不能在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嵌入内容和图像的属性

applet ， embed ， iframe ， object或video元素的width和height属性，以及在Image Button状态中具有type属性的input元素，或者表示图像或用户期望的最终将表示图像， 映射到维度元素的属性 width和height分别为。

10.2 CSS用户代理样式表和表示提示

当下面的文本说明元素上的属性映射到维度属性 （或属性）时，这意味着如果元素具有属性集，并且使用解析维度值的规则解析该属性的值不会生成错误，然后期望用户代理使用解析的维度作为属性的表示提示的值，如果维度是整数，则将值给定为像素长度，如果维度是a，则给出百分比值百分比。

Answer 2

尝试阅读w3c flexbox规格并偶然发现了这一点 。 它说

对于每个维度，如果Flex容器的内容框的维度是一定的大小，请使用该维度; 如果Flex容器的维度在min或max-content约束下调整大小，则该维度中的可用空间就是该约束。

否则，从该维度中Flex容器的可用空间中减去Flex容器的边距，边框和填充，并使用可能导致无限值的值。

希望这可以帮助。

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

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