html - 强制同一行中的多个图像按比例调整大小，而不是将它们移动到新行

Question

我的智能手机屏幕较小。我希望这三个图像保持在同一行。如果图像不适合，它们应该按比例缩小以保持在同一行内(见底部图像)。

假设我们有以下代码:

<div id="example">
    <span id="A"><img src="blabla1.png" /></span>
    <span id="B"><img src="blabla2.png" /></span>
    <span id="C"><img src="blabla3.png" /></span>
</div>

我已经做了几次尝试，比如下面这个简单的尝试:

#example {
    min-width: 200px;
    height: auto;
}
img {
   height: auto; 
   width: auto; 
}

fiddle :http://jsfiddle.net/fdce0x7k/1/

图片说明:

Answer 1

您可以尝试使用 css 的 flex 显示和 View 宽度属性:

fiddle :https://jsfiddle.net/gb5f9fcw/

HTML

<div id="example">
    <span id="A"><img src="http://placehold.it/350x150" /></span>
    <span id="B"><img src="http://placehold.it/350x150" /></span>
    <span id="C"><img src="http://placehold.it/350x150" /></span>
</div>

CSS

#example{
    display:flex;
    flex-wrap:nowrap;
}

#example span img
{
    width:33vw;
}