"Умный" ресайз картинок на CSS?

Question

[Miku Hatsune]

Я незнаю как чётко сформулировать свой вопрос, поэтому в гугл слать безполезно я просто не знаю что спросить его.

Буду объяснять свои мысли. Смотрите вот скриншот:



Мне нужно что бы картинка была шириной в 100%, но если так сделать она растягивается и теряет пропорции - одним словом ужас.

Как сделать через CSS ресайз картинки, так, что бы она не теряла пропорции, а просто немного обрезалась?

Comments

[Lynn «Кофеман»]

Вам это надо?
background-size: cover

[Miku Hatsune]

Не, картинка не фон, Она через img в блоке выводится

Answer 1

[mr_dev1l]

img {
 width:100%;
 object-fit:cover;
}

Answer 2

[Валерий Серов]

Оборачиваешь картинку в div ставишь ему overflow: hidden, а картинке widh: 100%

Answer 3

[Юрий Янин]

Еще есть вариант с JS. Определить ширину div контейнера с помощью запроса и заставить рисунок принять данную ширину за основу при этом, пропорционально увеличив высоту. Ну и соответственно div должен быть фиксированного размера, чтобы не начал растягиваться по высоте рисунка

Answer 4

[Ксения Михайлова]

Если вам заранее известны размеры div, можно установить изображение как background-image, и использовать background-size.