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

Question

My smartphone has a smaller screen. I want the three images keep at the same line. If the images don't fit, they should shrink proportionately to stay within the same line (see image at the bottom).

So let's say we have the following code:

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

I have done several attempts like the following simple one:

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

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

Image description:

Answer 1

You can try using flex display and view width properties for 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

An alternative to flex is to use CSS tables.

Apply display: table to the parent container .example and then display: table-cell to the child span's.

The trick is to set the with of the image to 100%, which will then force the table size to expand as much as possible to contain the three images. The net result is each cell will scale proportionately the image that it contains.

The one advantage is that CSS tables are more widely supported then flex at this time.

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