Wie kann ich mithilfe von CSS die Größe eines Bildes an die Webseite anpassen und die Proportionen beibehalten? ⇐ CSS

[Anonymous]

Ich möchte, dass ein Bild auf einer Seite mit 900 x 600 angezeigt wird, wenn die Seite groß genug ist, aber die Größe mit dem gleichen Seitenverhältnis verkleinern, wenn der Bildschirm kleiner wird. Ich kann das Bild mithilfe von object-fit: include; dazu bringen, aber das HTML-Element

Code: Select all

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 */
}

Code: Select all

Test




Test

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