resize portionally image and center in container

Question

I want to display my image in full-width Gallery. The container is static:

#container{
    width:100%;
    height:400px;
}

<div id="container">
   <img src="myimage.jpg">
</div>

I have images of different dimensions, so I want display the image in full width without deformate this in height, but centering the image (in height way) to diplay it in the center.

Answer 1

If you want to keep the same aspect ratio but your images are different dimensions your best solution would be as Patsy Issa is saying.

Use css

#myimage{
    background: url("myimage.jpg") no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:100%;
    height:400px;
}

And HTML

<div id="container">
    <div id="myimage"></div>
</div>

JSFiddle: http://jsfiddle.net/qBPy6/