Как обрезать картинку в слайдере Bootstrap3?

Question

[Odinokun]

Подскажите пожалуйста.
Как сделать так, что бы картинка в слайдере Bootstrap3 отображалась на всю высоту экрана, а по ширине была 100%. Но пропорции должны сохраняться (то-есть изображение должно не тянуться а должно обрезаться, если есть лишнее).
Вот я задаю:

img {
	height: 100vh;
	width: 100%;
}

и картинка естественно "плывет", а надо, что бы она была на всю ширину слайдера, а что не влезло отсекалось (как у свойства background-size: cover)

Answer 1

[Денис Васильев]

object-fit: cover

Comments

[Odinokun]

Прикольное решение, но плохо поддерживается.
Ишак вообще не работает, а Лисичка только синяя (Developer Edition) понимает его.
Хром и Опера работают с ним на ура.

[Odinokun]

Прошу прощения, Firefox нормально работает, это я криво код написал.
Не работает только Ишак, ну и пусть (хоть и жалко).

[lynnikvadim]

этот стиль нужно к тегу img применять ?

[Odinokun]

lynnikvadim: да. у меня вот такой код получился:
.slide .carousel-inner img {
width: 100%;
width: 100vw;
height: 100%;
height: 100vh;
object-fit: cover;
object-position: 50% 50%;
}