Bildanzeige: maximale Größe

rschmidt · 1 Mai 2022

Moin Moin zusammen,

ich habe eine einfach HTML Datei. Diese Datei soll nur ein Bild zentriert anzeigen:

HTML:

<body>
    <center>
        <img src="bild.php" class="bild">
    </center>
</body>

Die Bilddatei wird von einem PHP Script geliefert. Dabei kenne ich die Auflösung nicht. Es kann Bild im Querformat sein, aber eben auch im Hochformat oder eben Quadratisch. Die PHP liefert dabei unterschiedliche Bilder zurück.
Das Bild soll möglichst groß dargestellt werden.
Da ich aber nicht weiß, in welchem Format das Bild kommt, würde ein hochformatiges Bild bei "width: 100%;" ggf. nicht ganz auf einen Bildschirm passen. Wie bekomme ich es also hin, dass das Bild automatisch in der Maximalen große angezeigt wird?

Vielen Dank vorab.

rschmidt · 1 Mai 2022

Vielen Dank für die Hilfe.
Ich habe das Dank des Hinweis von Sempervivum wie folgt gelöst:

CSS:

.bild {
    width: 95%;
    height: 95%;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

Bildanzeige: maximale Größe

rschmidt

Neues Mitglied

rschmidt

Neues Mitglied

Neueste Beiträge