Как мне получить изображение по размеру веб-страницы и сохранить пропорции с помощью CSS? ⇐ CSS

[Anonymous]

Я хотел бы, чтобы изображение отображалось на странице с разрешением 900x600, если страница достаточно большая, но уменьшалось с тем же соотношением сторон, если экран становится меньше. Я могу заставить изображение сделать это, используя object-fit: contains;, но HTML-элемент

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

img.fit
{
--border-width : 10px;

max-width: 100%;
max-height: 100%;
position : absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: cyan;
outline: var(--border-width) solid red;
outline-offset: calc(-1 * var(--border-width));
/* aspect-ratio : 9 / 6; */
width : 900px;
height : 600px;
object-fit: contain; /* not what I want, but close */
}

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

Test




Test

[img]https://i.sstatic.net/6DPT74BM.jpg[/img]

Подробнее здесь: https://stackoverflow.com/questions/798 ... -using-css