How can I fill a div with an image while keeping it proportional?

Question

I found this thread — How do you stretch an image to fill a

while keeping the image's aspect-ratio? — that is not entirely the thing that I want.

I h

Answer 1

All answers below have fixed width and height, which makes solution "not responsive".

To achieve the result but keep image responsive I used following:

1. Inside container place a transparent gif image with desired proportion
2. Give an image tag inline css background with image you want to resize and crop

HTML:

    
 


.container img{
   width: 100%;
   height: auto;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}​