为什么Flex项目的宽度和高度会影响Flex项目的渲染方式?

Flexbox中具有max-height样式的图像呈现不同的呈现方式,具体取决于是否设置了heightwidth属性。

具有设置为图像的真实宽度/高度的属性的属性将保留其宽高比,但没有属性的属性会尊重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中也是如此)。

在flexbox中img的不同渲染。没有宽度和高度属性,并与

为什么他们呈现不同? 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-itemsalign-self属性

柔性物品可以在柔性容器的当前线的横轴上alignment,类似于justify-content但是在垂直方向上。

stretch

如果Flex项目的交叉大小属性计算为auto ,并且两个交叉轴边界都不是auto ,则flex项目将被拉伸。

这是关键的语言:

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

这是规范如何定义“跨尺寸属性”:

弹性物品的宽度或高度(以交叉尺寸为准)是物品的交叉尺寸横向尺寸属性横向尺寸中widthheight

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> 

尝试阅读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设置它们。

Interesting Posts