相关疑难解决方法(0)

使用CSS弹性盒模型,如何强制图像保持其纵横比？

JS小提琴 http://jsfiddle.net/xLc2Le0k/2/

请注意,图像会拉伸或缩小以填充容器的宽度.那很好,但我们是否可以拉伸或缩小高度以保持图像比例？

HTML

<div class="slider">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
</div>

CSS

.slider {
    display: flex;
}
.slider img {
    margin: 0 5px;
}

具有max-height样式的flexbox中的图像根据其是否具有其属性集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中也是如此).

他们为什么渲染不同？管理这种行为的规则是什么？

我的(显然不正确)的理解是,高度和宽度属性会覆盖在图像加载时发现内在的高度和宽度,如果高度和宽度属性等于图像的尺寸,应该是在渲染一旦图像无差异装了.

上下文正在制作一个包含响应图像的页面,其中每个图像

• 可以有独特的原始尺寸
• 加载时不会导致重排,即在初始渲染时保留正确的空间(因此使用高度和宽度属性)
• 可以同时适应所有屏幕(因此我vh在CSS中搞乱)

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