Картинка ХТМЛ, как пропорционально растянуть?

Question

[Kalwin UA]

Ребят, родил вопрос на ровном месте, частенько с ним сталкивался, и всегда уходил от ответа костыльным методом.
Суть:
Есть картинка в слайдере < img src = "..." alt = "..." > , и есть разрешение экрана в 100vh.
Соответственно получаю часть экрана с картинкой, а другую с синим фоном внизу. Как её пропорционально растянуть на весь размер экрана (не зависимо от девайса)? Именно по высоте, всё равно какая часть изображения спрятана по ширине.

Можно кинуть костыль на див img, я знаю
hight:100vh
display:block
background-image:..
background-size:cover
background-repeat:no-repeat
background-position:top center
но я не хочу делать, ибо, ну должен же быть нормальный вариант?

Comments

[Lord_Dantes]

Ничего не понятно, приведите пример кода

[Kalwin UA]

s l a v e, вот ссыль!

[Lord_Dantes]

Pasha Dayneka, width: 100%; height: 100%;
Если нужно растянуть картинку, если нужно растянуть нормально картинку то подгоняйте её под размер экрана.

[Kalwin UA]

s l a v e, Понял, других вариантов нет. Спасибо.

[Ankhena]

Именно по высоте, всё равно какая часть изображения спрятана по ширине.

height: 100% если внутри родительского дива, у которого высота 100vh.

Но вы же понимаете, что при этом по горизонтали часть картинки может быть спрятана, а могут быть и поля.

Если поля вас всё таки не устраивают, то object-fit: cover.
Но при этом, вместо полей по краям, картинка будет обрезана по высоте.

Против геометрии и пропорций не попрешь.

Answer 1

[Дима Долготер]

на img кинь object-fit: cover;

Answer 2

[Пашенька]

img {
    object-fit: cover;
}