img inside div should fill width or height

Question

I have a div which contains an image

<div class="logo-wrapper">
    <img src="img/logo.jpg">
</div>

and following CSS:

.logo-wrapper {
   width: 197px;
   height: 78px;
   position: relative; 
}

img {
   bottom: 0;
   display: block;
   height: 100%; /* this */
   width: 100%; /* or this, depending on image ratio */
   margin: auto;
   position: absolute;
   top: 0
}

The image inside .logo-wrapper is generated dynamically and each has a different ratio. What I intend to do, is to fill the img whether in the height or width of its parent depending on the dimensions of the image. I could do that with an background image instead, but I don't want to have trouble with old IE's. So does anyone have a solution that the img takes whether height or width, depending on its ratio?

Answer 1

If the image is bigger than .logo-wrapper , you can use

img {
   max-height: 100%;
   max-width: 100%;
}

If not, it won't grow, but this way you won't have a blurred image.