Check out this cool example page
When resizing the window in Firefox, Internet Explorer 10, and Opera, the images remain at their current sizes without any scaling.
However, Chrome shrinks everything down proportionally as desired. It's unclear whether Chrome is behaving incorrectly or if the other browsers are not handling it correctly. Finding a solution to this discrepancy can be challenging.
Below is the HTML code:
<section>
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div>
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div>
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div>
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div>
<div class="card"><img src="http://placehold.it/120x200" alt="" /></div>
</section>
And here is the CSS code:
section {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-moz-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-align: end;
-ms-flex-align: end;
-webkit-align-items: flex-end;
-moz-align-items: flex-end;
align-items: flex-end;
}
.card {
margin: 0 5px;
position: relative;
}
.card img {
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
display: block;
max-height: 100%;
max-width: 100%;
}