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

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

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

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

Answer 2

flex 的替代方法是使用 CSS tables.

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

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

一个优点是 CSS table 目前比 flex 得到更广泛的支持。

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

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

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

Force several images in the same line to resize proportionally instead moving them to a new line

html

css

shrink

autoresize

image-resizing