Адаптивные изображения в слайдере?

Question

[Денис Белевцов]

Есть слайдер. Высота фиксированная - 400px, ширина 100%(положим max-width: 1040px).
Нужно чтобы изображение в слайде всегда занимало 100% высоты/ширины слайда и находилось по центру. Изображение должно обрезаться, а не растягиваться. Насколько я понимаю с помощью JS нужно сравнивать высоту/ширину слайдера и высоту/ширину и в соответствии в полученным результатом добавлять изображению стили.
Какие есть готовые решения для таких нужд? Спасибо

Answer 1

[justdealman]

background-size: cover

Comments

[Денис Белевцов]

"Изображение должно обрезаться, а не растягиваться."

[justdealman]

Денис Белевцов бэкграунд и будет обрезаться, само изображение скрывайте display:none

[Денис Белевцов]

В таком случае нужно явно задать размеры контейнера. Такое решение не подходит.

[justdealman]

Денис Белевцов https://jsfiddle.net/32q8uft3/

[Денис Белевцов]

justdealman: Большое спасибо. Был не прав, background-size: cover действительно то что нужно.

Answer 2

[Serj-One]

js здесь не нужен, достаточно центрирования абсолютом + transform translate, и overflow: hidden.
Но в целом обрезка вместо масштабирования в слайдере нелогична.