css - Center aligning image in div -
html
<div class="image-container"> <img class="image" src="image.png"> </div>
css
.image-container { width: 95px; height: 95px; background: #000000; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .image { max-width: 95px; max-height: 95px; }
this works fine on chrome , safari not in firefox. it's filling whole div , aspect ratio not maintained. how make work on firefox?
chrome / safari
firefox
because of .image
height stretch image. change css this.
.image { width:100%; }
Comments
Post a Comment