Как растянуть картинку по высоте и ширине что бы не было белых полей но сохраняя пропорции?

Question

[Илья]

Собственно как сделать на чистом css что бы картинка была вписана в блок 300 на 200.
Но если высоты не хватает, растягивалось бы по высоте а не ширине.

Что бы не было внизу белых полей как у левой картинки.

Comments

[Rustam Bainazarov]

Вместо картинки выдавать фоновое изображение, либо object-fit для img.

Answer 1

[v3shin]

<div class="forImage" style="background-image:url(...)"></div>
.forImage {
    background: 50% 50% no-repeat;
    background-size: cover;
    width: 300px;
    height: 200px;
}

Answer 2

[natoje-zlo]

object-fit: cover

Answer 3

[WapSter]