Изменение размера изображения в CSS

Question

У меня есть HTML и нет большого контроля над ним, но у меня есть полный контроль над CSS. Один тега является тег изображения:

<img src="photo.jpg" alt="" /> 

Я хотел бы контролировать размер этого изображения таким образом, чтобы он соответствовал определенному размеру, как и 300px х 200px. Я хочу, чтобы сохранить пропорции, заполнить мою область, но отрезать любой избыток, как это было бы, если бы я, чтобы сделать фон «крышку»

Как это:

like this http://cdn.onextrapixel.com/wp-content/uploads/2012/02/cover-contain.jpg.

Есть ли какой-либо трюк CSS для этого? Или любой другой трюк?

Answer 1

Я думаю, что вы ищете свойство клипа.

img { 
    position: absolute; 
    clip: rect(0px,60px,200px,0px); 
} 

Источник: http://www.w3schools.com/cssref/pr_pos_clip.asp

Answer 2

Вы можете использовать object-fit: cover и object-fit: contain для достижения этой цели.

.cover { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid red; 
 
    object-fit: cover; 
 
} 
 

 
.contain { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid red; 
 
    object-fit: contain; 
 
}

<img class="cover" src="http://placebear.com/300/200"> 
 

 
<img class="contain" src="http://placebear.com/300/200">

... до тех пор, пока вы не обеспокоены IE.