HTML Bilder automatisch skalieren lassen

Avenger84 · 24. Januar 2024

Hallo, ich würde gern Fotos passend zum Browser Fenster skalieren lassen, ohne dass es verzerrt wird.
Habe mir schon zig Tutorials durch gelesen und ausprobiert.
Problem: ich kriege es nicht hin dass Bilder in der vertikalen skaliert werden, nur in der horizontalen.
(Wenn ich das Browserfenster auf sagen wir 1500(b)x200(h) schiebe, fehlt das Meiste.)

Dazu reicht schon:

Code:

img {
  max-width: 100%;
}

wenn ich den Browser auf 200(b)x1000(h) schiebe, dann wird es passend skaliert.

ob ich da drunter

Code:

img {
  max-width: 100%;
  height: auto;
}

setze, wie in den Tutorials, macht keinen Unterschied.

Wenn ich es umdrehe:

Code:

img {
max-height: 100%;
width: auto;
}

wird gar nicht mehr skaliert.

Habe noch viele andere Konstellationen probiert - ohne Erfolg.

Ist es wirklich nicht möglich?

QXARE · 24. Januar 2024

Versuchs mal mit height bzw. max-height von 100vh und width auto. Bringt das was?

Lawnmower · 24. Januar 2024

Womöglich geht es einfach wenn Du das Bild als Hintergrundbild z.B. vom Body oder von einem Div mit 100% Grösse nehmen würdest.
Dann skaliert das automatisch bzw Du kannst mit https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/background-size das Verhalten steuern.

Avenger84 · 24. Januar 2024

Versuchs mal mit height bzw. max-height von 100vh und width auto. Bringt das was?

dann verzerrt das Bild

Hintergrundbild wollte ich eigentlich nicht benutzen

SuperHeinz · 24. Januar 2024

Das Format im Höhen/Breiten-Verhältnis von Bild und Bildschirm ist identisch?

QXARE · 24. Januar 2024

Avenger84 schrieb:
dann verzerrt das Bild

Hintergrundbild wollte ich eigentlich nicht benutzen

Also so? Hab das gerade probiert und scheint zumindest im Schnellversuch gepasst zu haben. Gegebenenfalls auch ohne width.

CSS:

img {
  width: auto;
  max-height: 100vh; // bzw. height
}

Avenger84 · 24. Januar 2024

damit skaliert er jetzt vertikal, dafür aber nicht mehr horizontal..

MrHeisenberg · 24. Januar 2024

CSS:

img {
    display: block;
    width: 100%;
    height: auto;
}

Wenn es den Bildschirm füllen soll, dann als BG-Img mit folgender CSS:

CSS:

div {
    background: url("pfad/zur/datei.jpg") center center;
    background-size: cover;
    width: 100%;
    height: 100vh;
}

Janush · 24. Januar 2024

Schonmal ein bisschen mit object-fit: cover; rumgespielt?

Wenn es nur einen tool im Internet gäbe, welches solche Fragen schnell beantworten kann, ohne das man ewig Googlen muss ... oh wait :-)

Avenger84 · 24. Januar 2024

funktioniert leider alles nicht

https://media.kulturbanause.de/2015/07/css-object-fit.html da kannst du object-fit testen

MrHeisenberg · 24. Januar 2024

Avenger84 schrieb:
funktioniert leider alles nicht

Kann nicht ich mir nicht vorstellen. Was genau willst du denn erreichen?

Hiermit kannst du Bilder, abhängig von der verfügbaren Breite, proportional skalieren kann:

CSS:

img {
    display: block;
    width: 100%;
    height: auto;
}

Und hiermit kriegst du es Bildschirmfüllend im Browser:

CSS:

div {
    background: url("pfad/zur/datei.jpg") center center;
    background-size: cover;
    width: 100%;
    height: 100vh;
}

Alternativ musst du mit Mediaqueries arbeiten und je nach Ratio des Browserfensters entweder die Höhe des Bildes auf 100% setzen oder eben die Breite.
JavaScript wäre auch ne Option.

Avenger84 · 24. Januar 2024

Hab´s nun mit einem Grid Container:

Code:

    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 100vw;
            grid-template-rows: 100vh;
            justify-items: start;
            align-items: start;
        }

        img {
            max-width: 100%;
            height: 100%;
            object-fit: scale-down;
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <img src="1.jpg">
    </div>
</body>

geht das nicht einfacher ohne Container?

floq0r · 24. Januar 2024

max-width: 100%; gemeinsam mit max-height: 100%; versucht?

Avenger84 · 24. Januar 2024

ja

so sieht es perfekt aus:

Code:

    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 99vw;
            grid-template-rows: 99vh;
            justify-items: center;
            align-items: center;
            margin-left: -5px;
            margin-top: -5px;
        }

        img {
            max-width: 99%;
            height: 98%;
            object-fit: scale-down;
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <img src="1.jpg">
    </div>
</body>

ohne margin gibt es oben und links einen kleinen Rand, entsprechend steht das Bild dann unten/rechts etwas über.

QXARE · 25. Januar 2024

Könntest auch noch margin/padding von "html, body" auf 0 setzen, dann sollte das auch nicht mehr nötig sein.

Avenger84 · 25. Januar 2024

ich frage mich, ob ich wirklich der Erste bin im ganzen www, der ein Bild vertikal und horizontal skaliert haben möchte, und vorher noch niemand jemals auf die Idee gekommen ist.

Janush · 26. Januar 2024

Dein Ernst? Also ich habe jetzt mal ganz fix nen VS Code Live Server geladen und eine HTML mit nur einem img gebastelt. Dafür reicht einfach nur der folgende Code, damit das Bild in der Höhe oder Breite skaliert, damit es immer komplett sichtbar ist.

Code:

img {
   max-height:100vh;
   max-width: 100vw;
}

Bin auch verwundert, dass das geht, aber habe es mit Edge und Firfox getestet und es wird keinerlei sonstiges CSS gezogen.

Avenger84 · 26. Januar 2024

das kann doch echt nicht wahr sein, ich glaub ich hab alles erdenkliche ausprobiert, nur nicht die Kombination.

netzgestaltung · 26. Januar 2024

dir fehlt auch noch immer "display:block" beim img. Bilder werden default als "inline-block" angezeigt und erzeugen daher ein leerzeichen vor sich selbst und haben weitere andere Eigenschaften.

floq0r · 26. Januar 2024

Avenger84 schrieb:
das kann doch echt nicht wahr sein, ich glaub ich hab alles erdenkliche ausprobiert, nur nicht die Kombination.

Das wird daran liegen, dass niemand ein Bild auf die komplette Fensterdimension skalieren will. Auf die Kombi max-width/height hab ich dich hingewiesen.

HTML Bilder automatisch skalieren lassen

Lt. Commander

Lt. Commander

Maître de cuisine

Lt. Commander

Commander

Lt. Commander

Lt. Commander

Lt. Commander

Lieutenant

Lt. Commander

Lt. Commander

Lt. Commander

Commander

Lt. Commander

Lt. Commander

Lt. Commander

Lieutenant

Lt. Commander

Captain

Commander

Ähnliche Themen