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

flexbox中具有

max height

样式的图像根据其

height

和

width

属性是否已设置，呈现方式会有所不同

具有属性（设置为图像的真实宽度/高度）的渲染将保留其纵横比，但不具有属性的渲染将遵循

最大高度

，并显示为挤压

.flex父级{
显示器：flex；
最大高度：10vh；
}

---

flex容器的初始设置为

这意味着flex项将扩展到容器的各个部分

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

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

但是，当弹性项目具有定义的交叉尺寸时，它将覆盖

拉伸

默认值

根据规范：

弹性项目可以在项目当前行的横轴上对齐 flex容器，类似于

justify content

，但在垂直方向 方向

拉伸

如果弹性项的交叉尺寸属性计算为

自动

，以及 两个横轴边距都不是自动的，弹性项是 伸展

这是关键语言：

如果弹性项的交叉大小属性计算为

auto

这就是规范如何定义“交叉尺寸属性”：

弹性项目的宽度或高度，以十字中的为准 维度，是项目的交叉大小。交叉大小属性为 横向尺寸中的

宽度

或

高度

---

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

这就是你所拥有的：

.flex父级{
显示器：flex；
最大高度：10vh；
}

---

试图阅读w3c flexbox规范，但无意中发现。上面说

对于每个维度，如果flex容器内容的该维度 盒子是一个确定的尺寸，使用它；如果弹性体的尺寸 容器的大小是在最小或最大内容约束下确定的 该标注中的可用空间就是该约束

否则，从该维度中flex容器可用的空间中减去flex容器的边距、边框和填充，并使用该值，该值可能会产生无穷大的值

---

希望这能有所帮助。

这里您已经编写了最大高度：10vh，除最新的iOS 6外，任何浏览器都不支持vh。这适用于所有与视口相关的长度单位。 使用其他值而不是Vh，这样可以正常工作。 请阅读这个博客

.flex父级{
显示器：flex；
最大高度：最大含量；
}

问题在于设置最大高度的位置。默认情况下，css属性“最大高度”不会继承。css声明创建的div为视口高度的10%。未设置尺寸的图像会根据其父尺寸缩小。在其上设置隐式维度的图像总是这些维度。根据div的大小，它可能会溢出。如果将最大高度属性放在第一幅图像上，它应该调整大小，保持纵横比不变。

您将

max height

指定给父div，在img标签

flex parent img:first of type

i used

first of type

上指定该高度，以仅影响first

img

。第二幅图像具有

高度

和

宽度

，因此它看起来是适当的纵横比，但第一幅图像是渲染宽度不是纵横比。你可以在这里看到一个例子，你所指的文章是2013年的，在互联网时代，大约是十年前。这显示了与视口相关的测量改进了多少。我个人非常喜欢在某些情况下使用vh/vw。