为什么Flex项目的宽度和高度会影响Flex项目的渲染方式?
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中也是如此)。
为什么他们呈现不同? pipe理这种行为的规则是什么?
我的(显然是不正确的)理解是,高度和宽度属性覆盖图像加载时发现的内在高度和宽度,如果高度和宽度属性等于图像的尺寸,则一旦图像渲染应该没有区别已加载。
上下文正在制作一个响应式图像的页面,其中每个图像
- 可以有独特的原始尺寸
- 在加载时不会导致回stream,即在初始渲染时保留正确的空间(因此使用高度和宽度属性)
- 可以一次适合所有的屏幕(因此我搞乱在CSS中)
青蛙图片来自https://en.wikipedia.org/wiki/File:Red_eyed_tree_frog_edit2.jpg
flex容器的初始设置是align-items: stretch
。
这意味着flex项目将跨越容器的横轴扩展。
在行方向的容器中,就像问题一样,横轴是垂直的。
这意味着物品(在这种情况下的图像)将覆盖容器的整个高度。
但是,当Flex项目具有定义的交叉大小时,将覆盖默认的stretch
。
从规格:
8.3。 交叉轴alignment:
align-items
和align-self
属性柔性物品可以在柔性容器的当前线的横轴上alignment,类似于
justify-content
但是在垂直方向上。
stretch
如果Flex项目的交叉大小属性计算为
auto
,并且两个交叉轴边界都不是auto
,则flex项目将被拉伸。
这是关键的语言:
如果flex项目的cross size属性计算为
auto
这是规范如何定义“跨尺寸属性”:
弹性物品的宽度或高度(以交叉尺寸为准)是物品的交叉尺寸 。 横向尺寸属性是横向尺寸中的
width
或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>
尝试阅读w3c flexbox规格,并偶然发现这一点 。 它说
对于每个维度,如果flex容器的内容框的尺寸是一个确定的尺寸,则使用该尺寸; 如果柔性容器的该尺寸在最小或最大内容约束下被确定大小,则该维度中的可用空间就是该约束。
否则,从该维度的可伸缩容器可用空间中减去柔性容器的边距,边框和填充,并使用可能导致无限值的该值。
希望这可以帮助。
在这里你写了最大高度:10vh,除了最新的iOS 6以外,任何浏览器都不支持vh。这适用于所有与视口有关的长度单位。 使用其他值而不是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>
问题是你设置最大高度。 CSS属性max-height默认情况下不会被inheritance。 你的css声明创build了一个10%的视口高度的div。 没有尺寸的图像根据其父尺寸缩小。 您设置隐式尺寸的图像始终是这些尺寸。 根据div的大小,它可能会溢出。 如果您将max-height属性放在第一个图像上,则应resize以保持纵横比相同。
你应该考虑在px
设置它们。