IMG заполнить свой контейнер пространство без растягивания

Question

Посмотрите на эту скрипку: http://jsfiddle.net/5mneypc5/

Он содержит следующий код:

<style type="text/css"> 
.container { 
    width: 400px; 
    height: 200px; 
    overflow: hidden; 
    background: grey; 
    margin-bottom: 10px; 
} 

#c-width { 
    width: 350px; 
} 
#c-height { 
    height: 150px; 
} 

.container > img { 
    max-width: 100%; 
    max-height: 100%; 
} 
</style> 
<div class="container" id="c-width"> 
    <img src="http://lorempixel.com/500/250/cats/5"> 
</div> 
<div class="container" id="c-height"> 
    <img src="http://lorempixel.com/500/250/cats/5"> 
</div> 

Можно ли сделать это заполнить весь контейнер пространство, не растягивается? Обрезание разрешено.

Я пробовал как min-height, max-width, так и max-height, min-width случаях, но каждый из них работает только для одного из моих контейнеров.

Чистый CSS является предпочтительным; Но также приветствуются решения JavaScript/jQuery.

Answer 1

Используйте фоновое изображение вместо img элемента:

.container { 
    background-image:url('../images/bg.png'); 
    background-repeat:no-repeat; 
    background-size:cover; 
    background-position:center; 
} 

Answer 2

.container img{ 
    width:100%; 
} 

ПРИМЕР- jsfiddle

Я думаю, что это поможет вам

Answer 3

Об использовании IMG один на 100%, а другой при авто в зависимости от предпочтения и соотношения изображений. Кроме того, вы даете тот же div двух разных размеров. Один с классом, другой с id. Выберите один, а затем при необходимости измените с помощью @media размеры устройства. Попробуйте это и дайте мне знать.

Answer 4

Вы должны изменить max-width: 100%; и max-height: 100%; к min-width: 100%; и min-height: 100%;

Вот обновление к вашей скрипке:. http://jsfiddle.net/5mneypc5/1/

Answer 5

Попробуйте это,

.container > img { 
    width: 100%; 
    height: 100%; 
} 

Я надеюсь, что это полезно для и .,