center image vertically inside a smaller div

Question

I have a dynamic page, the image loaded could be larger than the div or smaller than the div. The div is 100% width and 105px height.

I need the image to fill the entire div all the time. If the image is bigger i need it to keep its aspect ratio and just the center part of the image be shown. How can i do this?

<div class="image-container info-container-area " style="">
    <div class="info-area">
        <div class="image-wrapper" style="height: 105px;">
            <img src="image.jpg" >
        </div>
    </div>
</div>

Answer 1

Try giving width:inherit; height:inherit; width:inherit; height:inherit; for img tag

Answer 2

Set Most Outer Div Style CSS as below. Seems your outer div class class="info-area" .

 display: table-cell;vertical-align: middle;

Answer 3

I do not know if my example it helps you... you can try my example

[http://jsfiddle.net/Ouali/YT85P/3/][1]