Где взять подходящий jquery плагин для ресайза изображения под размер div-контейнера?

Question

[Ростислав]

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

<div class="img-container">
<img src="img.jpg" class="img" />
</div>

Размер img-container 300рх на 300рх. Размер изображения 400рх на 500рх.
Плагин должен подогнать изображение под размер контейнера и отцентировать его.
Плагин НЕ должен:
1) делать изображение фоном
2) как либо изменять тег img (src и т.д.)
3) делать изображение position:absolute; (просто relative и центрирует с помощью top,left и т.д.)

Answer 1

[Сергей Мелодин]

А почему нельзя задать тегу img "width=100%"?

Comments

[Ростислав]

Нужно чтобы изображение не искажалось. Например одно изображение может быть 300x500, второе 500x300. С помощью css мне не удалось добиться нужного результата.

[Сергей Мелодин]

Ростислав, что значит "не искажалось"? Потеря качества при масштабировании практически неизбежна. Можно попробовать использовать css-свойство image-rendering

[Ростислав]

Сергей Мелодин, "не искажалось" - то есть не растягивалось, чтобы размеры изменялись пропорционально.
Вот например width:100%
prntscr.com/h89zcx
Если задать height:100% то изображение растянется.

[Сергей Мелодин]

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

[Ростислав]

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

[Сергей Мелодин]

Ростислав, тогда можно получать размеры элемента и написать условие "если высота больше ширины, то ширина 100%, иначе высота 100%".

[Ростислав]

Сергей Мелодин, примерно это я и не хотел писать самостоятельно) но видимо придется. Примерно из 10 плагинов которые нашел ни один не работал так как нужно.

[Сергей Мелодин]

Ростислав, так а чо там писать-то, дольше его обсуждали:
https://jsfiddle.net/27wdpuzy/

центрировать можно через тот же js или как тебе удобнее

[Ростислав]

Сергей Мелодин, все равно не то. Картинка же не покрывает весь контейнер. Ладно, напишу сам решение, скину потом сюда. Вроде такая простая и нужная вещь, а готового плагина нет.

[ThunderCat]

Ростислав,

Картинка же не покрывает весь контейнер.

это вообще то, как бэ, не совсем возможно без искажения. Вам не приходило в голову что прямоугольник(400*500) в квадрат(300*300) вписать с полным покрытием без искажения не получится?

[Ростислав]

ThunderCat, ладно, я плохо объясняю. Должно работать как этот плагин periplox.github.io/jquery.imagefit
Только чтобы позиция была relative, а не absolute

[ThunderCat]

Ростислав, то есть изображение вписывается по наибольшей стороне и обрезается до размера контейнера, так?

Answer 2

[Конан Варвар]

img {
object-fit: cover;
object-position: center;
}

Если не сильно колит поддержка :)

Comments

[Ростислав]

Я не поклонник старых ослов (ie), но object-fit не поддерживать ie11 и даже edge. По этому такой вариант не подходит.

[Конан Варвар]

Ростислав, я и говорю если не колит поддержка :)