How to scale image to fit the container?
Change the height
and width
to max-height
and max-width
. The image won't be any bigger than it's parent.
.thumbnail img {
max-height: 100%;
max-width: 100%;
}
Updated Fiddle
.thumbnail {
height: 100px;
display: table;
}
.thumbnail img {
height: 100%;
width: 100%;
display: table-cell;
vertical-align: middle;
}