My phone's screen is small and I want the three images to remain in the same row. In case they don't fit, they should shrink proportionately to maintain alignment (refer to image at the bottom).
Consider the code snippet below:
<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 tried a simple solution like this before:
#example {
min-width: 200px;
height: auto;
}
img {
height: auto;
width: auto;
}
Check out the Fiddle here: http://jsfiddle.net/fdce0x7k/1/
Image description: