Как красиво вписать картинку в блок определенных размеров (если на входе картинки разного размера)?

Question

[oe24y]

Есть что-то типа админки. Пользователь грузит файл.
Во фронтенде надо его красиво вписать в квадрат, например, 100x100 (ну чтобы не поплыло все).
Картинки на входе могут быть разными, например:
50x170
120x300
(пользователей нельзя заставить самостоятельно обрезать или подгонять под нужный размер заранее)

Comments

[shmatuan]

Заранее нельзя - пусть потом обрезают https://fengyuanchen.github.io/cropperjs/

Answer 1

[AlexKeller]

https://jsfiddle.net/7q9kesdc/

Answer 2

[winbackgo]

Тут все ответы https://css-tricks.com/almanac/properties/o/object-fit/

Answer 3

[Даниил Кириллов]

background: url(img.pmg) center center cover

Comments

[oe24y]

А если картинка 700x550 - как ее вписать в 100x100 чтобы было понятно что на ней?

[Даниил Кириллов]

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

Answer 4

[MaksPaverov]

img{
width: 100px;
height: 100px;
}

Comments

[Максим]

height не надо указывать

[oe24y]

А если картинка 700x550 - как ее вписать в 100x100 чтобы было понятно что на ней?