Как заменить object-fit в старых браузерах?

Question

[Alex12300]

Недавно начал изучать верстку, сделал несколько проектов и наткнулся на такую проблему, что свойство object-fit: cover не работает в браузерах edge и ie. Верстал блок с отзывами и использовал в нем маленькие аватарки. Но в этих браузерах они сжимались. Я добавил их через css и использовал bac size. Не считается ли это дурным тоном? Может быть есть какой-то другой способ отобразить их корректно?

Так же есть еще один вопрос. Есть карточка с товарами я задал ей фиксированную высоту 200px, а ширина у нее подтягивается автоматически и все отображается как надо, но в edge ширина картинки расползается по всему родителю. Но задать фиксированную ширину не могу так как в разных карточках разная ширина картинки. Как это пофиксить?

Answer 1

[Сергей delphinpro]

но в edge ширина картинки расползается по всему родителю.

Правильнее сказать в edge до 2017 года выпуска. Это более пяти лет назад. Про IE вообще уже даже упоминать не стоит.

Нормальный вариант - забить.
Если забить нельзя, то заменить object-fit на background-size. Его даже IE с 8 версии понимает. Понятно, что картинки переносим в фон.

Answer 2

[Антон Литвиненко]

Вообще контентные картинки не должны лежать в css, иначе как на реальном сайте их загружать.
по хорошему аватарки и картинки товаров должны кропаться на сервере и приходить уже квадратными.
но если все же нужно поведение как у object-fit вот могу предложить небольшой хак
https://fls.guru/ibg.html
обертке картинки даем класс .ibg и наслаждаемся магией)