如何确保flexbox容器中的图像按比例缩放？

Question

在我的网页上，我想添加一个简单的CSS flexbox容器，里面有三个图像。此外，我想为每个图像设置一个宽度（例如50像素），并使每个图像的高度按比例自动缩放到该宽度。

我以前使用的HTML / CSS是：

HTML

<div class="box">
<img src="http://kabultec.org/dev/wp-content/uploads/2017/07/logo-nbc.svg" width="50px" />
<img src="http://kabultec.org/dev/wp-content/uploads/2017/07/logo-cnn.svg" width="50px" />
<img src="http://kabultec.org/dev/wp-content/uploads/2017/07/logo-abc.svg" width="50px" />
</div>

CSS

.box {
    display: flex;
    height: 500px;
}

但是当我这样做时，两个图像按比例缩放到所需的宽度，而一个图像的高度不成比例地伸展以填充flexbox容器（page here）。为什么这种看似不一致的行为会发生？不应该以相同的方式缩放所有三个图像：所有图像都被拉伸或者所有比例都受到限制？

• 如果我将align-items: center添加到我的CSS中，则相关图像会按比例缩放。
• 有问题的图片是SVG图片。
• 有问题的网站是WordPress网站。
• 最终目标是使用CSS flexbox创建类似于this的布局。目前，由于我是第一次学习flexbox，我正在尝试按照MDN教程Basic concepts of flexbox学习基本概念/行为。

感谢。

Answer 1

如果要保持SVG图像的宽高比，请确保它在外部元素上具有viewBox属性。

SVG规范讨论了viewBox和preserveAspectRatio。它声明如果你有一个viewBox，你只能保留纵横比。