Как обрезать фотографии на стороне клиента?

Question

[lavezzi1]

Здравствуйте. Такая проблема - нужно обрезать фотографии в новостных блоках, то есть есть какая то облать отведенная под фото и его нужно туда поместь через тег img. Поместить так, чтобы выглядело как будто через background-size: cover;

1) Object-fit идеально подходит, но на проекте нужна поддержка IE10, возможно даже IE9. Может есть фолбэк?
2) Можно как то через position absolute с overflow:hidden?
3) К JS прибегать не хотелось бы...

Comments

[Андрей Федоров]

А почему нельзя использовать background-img?

[lavezzi1]

Андрей Федоров: Заказчик сказал, что сервер будет отдавать картинки в тег img

[Андрей Федоров]

lavezzi1: А исходники абсолютно разных размеров и аспекта?

[lavezzi1]

Андрей Федоров: Да, есть горизонтальные блоки, есть вертикальные.

[Александр Таратин]

Андрей Федоров: background-image не поддерживает прогрессивное отображение jpeg в большинстве браузеров calendar.perfplanet.com/2012/progressive-jpegs-a-n...

[Андрей Федоров]

Александр Таратин: Уверен, что в 2012 году это было так. К тому же в вопросе ни слова про прогрессивный jpeg

[Александр Таратин]

Андрей Федоров: Проверил в последних версиях Firefox, IE Edge, IE11 ничего не изменилось. Работает только в Блинк браузерах.

Answer 1

[Александр Таратин]

https://jsfiddle.net/QW01_01/dwL1bxqv/

Comments

[lavezzi1]

Круто, но когда прилетает большая картинка она не маштабируется пропорционально, подстраиваясь под нужный блок...как при bgs:cover;

[Александр Таратин]

lavezzi1: Без js это максимум чего можно добиться.

Answer 2

[Web Developer Blog]

если через position absolute с overflow:hidden, там можно попробовать с псевдоэлементами

Answer 3

[Денис Гончаренко]

Для IE без JS такого не реализовать никак, в других браузерах может еще и можно найти альтернативу для Object-fit на css но в IE ни одна из этих альтернатив не поддерживается. Чем background-size: cover; с дивом не устраивает вместо изображения?
П. с. лучше при загрузке изображений для новости чтобы они обрезались под нужный размер и сохранялись, ибо используя даже background-size: cover; с большими чем нужно изображениями, страница будет не оптимизирована и будет грузиться в разы дольше чем могла бы с маленькими картинками.

Comments

[Александр Таратин]

Денис Гончаренко background-image не поддерживает прогрессивное отображение jpeg в большинстве браузеров calendar.perfplanet.com/2012/progressive-jpegs-a-n...