Масштабируйте изображение, чтобы полностью покрыть ширину и высоту области просмотра, но оставьте его необрезанным и доб ⇐ CSS

[Anonymous]

Я хочу пропорционально масштабировать изображение, чтобы один размер составлял 100 % области просмотра, а другой был больше области просмотра, но оставил его необрезанным и вместо этого добавил полосы прокрутки в большем направлении. Он должен работать для изображений с разными соотношениями сторон и с разными соотношениями сторон области просмотра.
Смотрите этот рисунок (черный — область просмотра, серый — изображение)
Я пробовал установить минимальную ширину: 100vw и минимальную высоту: 100vh. Это работает, когда область просмотра больше размеров изображения в пикселях, но не когда она меньше. (Изображение в коде имеет размер 600x400 пикселей. Запустите фрагмент кода на всей странице и перетащите окно браузера шириной менее 600 пикселей и высотой 400 пикселей, чтобы увидеть, что масштаб изображения не соответствует области просмотра.)
Я также попробовал фоновое изображение, но затем изображение обрезается без полос прокрутки.
Поскольку код почти работает, должно быть легкое решение, или мне нужно это сделать решить проблему другим способом?

Код: Выделить всё

html {
width: 100%;
margin: 0;
}
.full-plus {
width: 100vw;
height: 100vh;
}
.full-plus img {
min-width: 100vw;
min-height: 100vh;
}

Код: Выделить всё

[img]https://www.w3schools.com/w3css/img_lights.jpg[/img]

Подробнее здесь: https://stackoverflow.com/questions/790 ... e-it-uncut