Как заполнить картинку в контейнере?

Question

[kachurinets]

Есть фиксированный контейнер, в нем должна быть картинка. Есть два возможных исхода.
1. Если картинка уже, чем ширина контейнера, то растягиваем картинку на всю ширину контейнера, а верх и низ картинки обрезаем.
2.Если размеры картинки больше, чем ширина контейнера мы обрезаем левую и правую часть изображения.

Я добавил две картинки с разными размерами и сделал нужное, но у меня это получилось только с допольнительным классом.
https://jsfiddle.net/5z8c2rab/
Мне нужно чтобы размер и нужное действо автоматически применялось. Можно ли это сделать средствами сss, без использования js? Если это делается с помощью js, то как правильнее всего сделать?

Answer 1

[Одиночка Айс]

Если вы верстальщик, забейте, это задача серверных ЯП.

Comments

[d'Ivan]

На сервере есть более полезные вещи, которые можно делать, чем заниматься обработкой изображений.

[Одиночка Айс]

Роман Мирр, интересно как вы решаете поставленный вопрос для своих клиентов

Answer 2

[d'Ivan]

CSS3 object-fit
object-fit: contain;
jsfiddle.net/xwrvxser/1

или так:
https://codepen.io/sirajalam049/pen/ppzQzW

Comments

[kachurinets]

в данном случае картинка просто подгоняется под размер, мне же нужно, чтобы если картинка больше контейнера она вырезалась, если меньше, то растягивалась под всю ширину картинки

[d'Ivan]

kachurinets,
растягивать так:
background-size: cover;
Для данной задачи нужно проверять размер изображения и назначать соответствующий класс CSS контейнеру. Я бы делал так, не будучи фронтэнд разработчиком.