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

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; 
}

小提琴：http://jsfiddle.net/fdce0x7k/1/

图片说明：

Answer 1

您可以尝试使用flex显示和查看css的宽度属性：

小提琴：https://jsfiddle.net/gb5f9fcw/

<强> HTML

DoThisAtEndOfExecute()

<强> CSS

<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>

Answer 2

flex的替代方法是使用CSS表。

将display: table应用于父容器.example，然后display: table-cell应用于子span

。

诀窍是将图像的显示设置为100%，然后强制表格大小尽可能扩展以包含三个图像。最终结果是每个单元格将按比例缩放它包含的图像。

一个优点是CSS表格在flex目前得到了更广泛的支持。

＆＃13;

＆＃13;

.example {
  border: 1px dotted blue;
  display: table;
  width: 100%;
}
.example span {
  display: table-cell;
  width: auto;
  border: 1px dashed red;
  padding: 5px;
}
.example span img {
  vertical-align: top;
  width: 100%;
}

＆＃13;

<div class="example">
    <span id="A"><img src="http://placehold.it/400x50" /></span>
    <span id="B"><img src="http://placehold.it/200x50" /></span>
    <span id="C"><img src="http://placehold.it/100x50" /></span>
</div>

＆＃13;

＆＃13;

＆＃13;