Как сделать чтоб картинка в блоке не растягивалась?

Question

[voproser]

Как сделать чтоб картинка в блоке не растягивалась, а обрезалась, точнее например они по размерам не подходит блоку ( блок больше например по ширине) и чтоб картинка не растянулась, а увеличилась.

Answer 1

[Brad9aga]

object-fit:cover; /*для img*/

Comments

[Филипп Гапоненко]

https://caniuse.com/#feat=object-fit
В IE не поддерживается к сожалению.

[Brad9aga]

Филипп Гапоненко, та я ссал на этот браузер и тут про поддержку ие ни слова

[voproser]

Brad9aga, спасибо тебе большое! очень долго не мог найти решение, а ты порешал. Вот большое тебе человеческое СПАСИБО!

[Brad9aga]

samnebudu, не за что
https://html5book.ru/svoystva-object-fit-i-object-...

Answer 2

[Филипп Гапоненко]

background-size: cover;

Пример

Comments

[Алексей Уколов]

Это подойдёт, разумеется, только есть картинка указана через CSS, а не тегом <img/>.

[Филипп Гапоненко]

Алексей Уколов, выше накидал примерчик, там есть вариант и с css и с img.

[Филипп Гапоненко]

Добавил еще вариант с флеком.