Как изображениям в блоке задать одинаковую величину, и что бы они обрезались рамками блока?

Question

[Чёкатилло]

-Изображения имеют разный размер
-Изображения должны быть по центру блока
-Изображения должны сохранять свои пропорции, дабы избежать их растягиваний
-блок имеет фиксированную высоту и ширину (например:
height: 380px;
width: 320px;)

Это все для слайдера изо. на чистом css!
Желательно ограничится средствами css, если у кого найдется такой скрипт, то пожалуйста поделитесь
Спасибо!

Comments

[Сергей Тутуков]

Величина - это высота?

[tkutru]

А причем тут php?

[Чёкатилло]

Сергей Тутуков: Высота - это величина

[Чёкатилло]

tkutru: для для количества

Answer 1

[Дмитрий]

https://jsfiddle.net/soledar10/oom6gcvp/

Comments

[Чёкатилло]

Спасибо Четко!) а получится ли теперь блоку задать бордер-радиус? ) чет не получается

[Дмитрий]

Дмитрий: https://jsfiddle.net/soledar10/oom6gcvp/2/

[Чёкатилло]

Дмитрий: это что-то у меня не так

Answer 2

[Ivan Bogachev]

Желательно ограничится средствами css, если у кого найдется такой скрипт, то пожалуйста поделитесь

Используйте свойство object-fit для картинок - codepen.

Comments

[Сергей Тутуков]

поддержка браузерами - caniuse.com/#search=object-fit
polyfill - https://github.com/anselmh/object-fit

[Чёкатилло]

а как с поддержкой такого варианта, скажите пожалуйста?)

[Ivan Bogachev]

Дмитрий: object-fit-images поддерживает IE9+, остальные браузеры более-менее поддерживают это свойство из коробки

Answer 3

[justdealman]

https://jsfiddle.net/kpgzurgw/