Sizing a set of images to fit a grid using css

Have you ever tried to size a set of images to a flexible yet limited size i.e. set a maximum width and height but also keep the individual images vertically and horizontally centered inside a block element?

Try this:

HTML:

<div class="logo">
<img src="/images/logo.png" />
</div>

CSS:

.logo {
width: 200px;
height: 100px;
}
.logo img {
display: inline-block;
position: relative;
width: auto;
height: auto;
max-width: 180px;
max-height: 80px;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%); 
-webkit-transform: translate(-50%,-50%); 
-moz-transform: translate(-50%,-50%); 
-o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

Remember to use browser prefixes for transform as this is still experimental CSS3. Also make sure to use display: inline-block for compatibility with Chrome.

Happy coding!