CSS - есть 16: 9 изображение заполнить тело, но сохранить соотношение на 4: 3

Question

Я ищу, чтобы изображение заполнило 100% ширину и высоту страницы.

Я нашел некоторый CSS, не могу вспомнить, где сейчас выполняется эта задача - однако мои изображения 16: 9, и при просмотре на мониторе 4: 3 изображения становятся раздавленными, чтобы соответствовать более узкой ширине.

Таким образом, изображение в формате 16: 9 будет аккуратно и с другими разрешениями (или размерами браузера) изображение будет централизованным и обрезанным, поэтому ему не хватает краев.

Как вы можете видеть из скрипки, белый квадрат в тестовом изображении не является квадратным.

Fiddle: http://jsfiddle.net/7h6yt/

И CSS/HTML.

<img src=http://i47.tinypic.com/izyqyv.jpg> 

     body{ 
      margin: 0; 
     } 

     img{ 
      min-height: 100%; 
      min-width: 1024px; 
      width: 100%; 
      height: auto; 
      position: fixed; 
      top: 0; 
      left: 0; 
     } 

     @media screen and (max-width: 1024px){ 
      img{ 
       left: 50%; 
       margin-left: -512px; 
      } 
     } 

Answer 1

Попробуйте использовать атрибут

background-size: cover; 

, как это?

http://jsfiddle.net/7h6yt/1/