Tag: 响应图像

为什么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