Three images side by side, responsive without scaling - html

Question

I cannot find the exact answer to my question, so hopefully someone can help me.
I have three images. I want them side by side on a large screen.
On a smaller screen (tablet) I want two of them to be in rows.
And on small phone screen I want them all to be in rows above each other, centered.
The code that I have so far is:
<div align="center">
<div style="width: 371px; float: left;"><img src="{{media url="wysiwyg/magenthemes2/images/review1.png"}}" alt="" width="371" height="270" /></div>
<div style="width: 371px; float: left;"><img src="{{media url="wysiwyg/magenthemes2/images/review2.png"}}" alt="" width="371" height="139" /></div>
<div style="width: 371px; float: left;"><img src="{{media url="wysiwyg/magenthemes2/images/review3.png"}}" alt="" width="371" height="139" /></div>
</div>
But this doesn't work right. It is also not centered. I'd like it to render like this:
Responsive example on different screen sizes

Answer 1

The best way to do this is to give the parent <div> a class name, and then apply different styles to it in different #media queries. More can be read about #media at MDN. you could use this site, or this site for a simpler but less complete overview, as a cheatsheet for which media queries you could use.
An example of some code that would work for a selection of devices is:
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.imagebox > img {
float:left;
}
}
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.imagebox > img:first-child {
float:left;
}
}
<div align="center" class="imagebox">
<div style="width: 371px; float: left;"><img src="https://placekitten.com/250/300" alt="" width="371" height="270" /></div>
<div style="width: 371px; float: left;"><img src="https://placekitten.com/250/150" alt="" width="371" height="139" /></div>
<div style="width: 371px; float: left;"><img src="https://placekitten.com/250/150" alt="" width="371" height="139" /></div>
</div>

Answer 2

Instead of float you can also work with the text-align attribute. In the following example you can see how I used it for boxes on a front-page. They automatically adjust to different screen-sizes (click on "Run code snippet" and then on "Full page").
.entries-box {
/* Style for box containing Frontpage boxes */
text-align: center;
padding: 0;
}
.entry {
/* Style for a Frontpage box */
display: inline-block;
text-align: left;
padding: 0.4em 0.8em 0.4em 0.8em;
border: 1px solid black;
margin: 0 1em 0.4em 0;
border-radius: 10px;
background: #007f59;
}
<div class="entries-box">
<div class="entry newest-e">
<b>Title of Storie</b> - Genre (Lang icon)
<br>'Excerpt of newest entry, max. 2 lines
<br>Second line of excerpt...'
<br>_User_
</div>
<div class="entry newest-e">
<b>Title of Storie</b> - Genre (Lang icon)
<br>'Excerpt of newest entry, max. 2 lines
<br>Second line of excerpt...'
<br>_User_
</div>
<div class="entry newest-e">
<b>Title of Storie</b> - Genre (Lang icon)
<br>'Excerpt of newest entry, max. 2 lines
<br>Second line of excerpt...'
<br>_User_
</div>
</div>