<div class="flexTest"> <img src="holder.js/300x200/auto/random"></img> </div> <div class="flexTest"> <img src="holder.js/200x300/auto/random"></img> </div> <div class="flexTest"> <img src="holder.js/200x200/auto/random"></img> </div> <div class="flexTest"> <img src="holder.js/100x100/auto/random"></img> </div>
*{box-sizing:border-box;} .flexTest{ display:flex; width:200px; height:200px; padding:5px; float: left; margin-left:20px; border:1px solid #ddd; justify-content:center; align-items:center; } .flexTest img{ max-width:100%; max-height:100%; width:auto; height:auto; }