Add text-align: center;
CSS declaration to the parent .box
instead of the children .box img
.
.box {
height: 100%;
width: 450px;
border: 2px solid red;
background: green;
overflow: hidden;
text-align: center; /* align center all inline elements */
}
Here is the Fiddle.
Update
It seems there’s also a 5px
gap under the image, It belongs to the line height reserved characters. To remove that from inline elements like <img>
you can use vertical-align: bottom
:
.box img {
height: 100%;
width: auto;
vertical-align: bottom; /* <-- fix the vertical gap */
}