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

enter image description here

firefox

enter image description here

because of .image height stretch image. change css this.

.image {     width:100%; } 

Comments

Popular posts from this blog

java - Plugin org.apache.maven.plugins:maven-install-plugin:2.4 or one of its dependencies could not be resolved -

Round ImageView Android -

How can I utilize Yahoo Weather API in android -