Автоматическое изображение растянуть/сжать/растениеводство в обоих направлениях

Question

У меня есть контейнер-DIV с

• Высота: 400px;
• Ширина: 80%;

У меня есть набор изображений разных размеров.

Как я указать, что изображение:

• всегда поддерживает это соотношение сторон
• Всегда заполняет контейнер-DIV
• Выравнивает к центру контейнера-DIV
• Когда DIV более широкий, чем изображение
  • ширина изображения растягивается или сжимается до ширины div
  • высота изображения автоматически обрезается для поддержания соотношение сторон
• Когда DIV является выше чем изображение
  • высота изображения растягивается или выжатый до Div-высоты
  • ширины из изображения автоматически обрезается для поддержания соотношения сторон

это возможно использование только CSS (без JS)? Если проще, JS также является опцией. Изображение может быть установлено как фон или как явный тег img внутри div.

Примеры:

• Когда ширина окна 500px, то DIV будет 400px (Вт) & 400px (Н)
  • Изображение 1000px (Вт) & 500px (Н) должна быть сжимается до 800px (W) x 400px (H) и 200px следует обрезать как слева, так и справа.
• Когда ширина окна 1500px, то DIV будет 1200px (Вт) & 400px (Н)
  • изображение 1000px (Вт) & 500px (Н) должна быть натянута до 1200px (Вт) x 600px (H) и 100px должны быть обрезаны как сверху, так и снизу.

Fiddle на: http://jsfiddle.net/fnbL757q/

HTML:

<div id="container"> 
    <img id="image" src="https://lh4.googleusercontent.com/-jKo72r_w7e4/UlFMCWDx-dI/AAAAAAAAIl0/whCcucpCc_I/s1024/IMG_5364_LQ.jpg" /> 
</div> 

CSS:

#container { 
    max-height: 400px; 
    width: 80%; 
    border: 1px solid black; 
    margin: 0 auto 0 auto; 
    overflow: hidden; 
} 

#image { 
} 

Спасибо заранее.

Answer 1

Вы можете попробовать что-то вроде этого:

#container-DIV { 
    background-image:url('your_image.png'); 
    background-repeat:no-repeat; 
    background-size:cover; 
} 

правила CSS background-size:cover будет, согласно http://www.w3schools.com/cssref/css3_pr_background-size.asp:

Scale фоновое изображение, чтобы быть как можно больше, так что фон площадь полностью покрытый фоновым изображением. Некоторые части фонового изображения может не быть в поле зрения в фоновом режиме позиционирования области

Demo JSFiddle: http://jsfiddle.net/lparcerisa/p3fxmh78/