Bild mit maximaler Höhe von 100%

thesecretboy

Hallo zusammen,

ich habe hier einen HTML-Code, der ein Bild lädt und alle paar Sekunden auch neu lädt.
Bei der Bildgröße habe ich aber ein kleines Problem. Beim strecken des Fensters in die Breite wird das Bild proportional vergrößert, was auch in Ordnung ist, da das Bild auf verschieden großen Fernsehern und Fernsehern mit unterschiedlicher Auflösung angezeigt werden soll. Allerdings wird das Bild auch über die 100% Bildschirmhöhe hinaus gestreckt. Kann ich das irgendwie so lösen, dass bei 100% Bildschirmhöhe nicht weiter vergrößert wird und dann eben links und rechts ein Teil schwarz bleibt? Ich habe schon versucht mit "max-height" zu experimentieren, aber ich habe nicht hinbekommen. Könnte mir jemand auf die Sprünge helfen?

Hier mal mein Code:

HTML

<html>

<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="refresh" content="30">
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="robots" content="noindex,nofollow">
<title>Stunden- und Raumplan</title>
</head>


<style>

* {
margin: 0;
padding: 0;
}

html, body {
width: 100%;
height: 100%;
}

body {
font-size: 150%;
font-family: sans-serif;
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-color: #000000;
}

#zentriert {
text-align: center;
width: 100%;
max-height: 100%;
}
.bild {
width: 100%;
height: auto;
}

</style>

<body>

<div id="zentriert">
<img alt="" src="stundenplan.jpg" class="bild"/>
</div>

</body>
</html>

Alles anzeigen

MrMurphy

Du verwendest viele alte und / oder sinnfreie Anweisungen. Die werden leider auch in vielen Foren immer noch verbreitet. Für eine Lösung mit aktuellem HTML und CSS ist deshalb der erste Schritt: abreißen und neu machen.

Zunächst aber zwei grundsätzliche Bemerkungen:

Falls dein Bild Text enthält (das drängt sich durch den Namen stundeplan.jpg gradezu auf) solltest du das bleiben lassen. Texte in Bildern sind keine Informationen. Damit bekommst du nur Stress.

Und hast du dir mal überlegt wie das Bild auf Smartphones und ähnlichen Geräten angezeigt werden soll? Falls es Text enthält wird es kaum zu lesen sein.

Ein Stundenplan ist eine Liste. Bei ausreichend Platz in Tabellendarstellung. Das verführt viele Anwender dazu einen Stundenplan für eine Tabelle zu halten. Das ist aber sachlich falsch. Deshalb ist für Stundenpläne und ähnliche Informationen das dl-Element korrekt. Also weder ein Bild noch eine Tabelle (table-Element). Das kann dann auch am besten an unterschiedliche Bildschirmgrößen angepasst werden und ist am besucherfreundlichsten. Stichwort: Barrierefreiheit / Zugänglichkeit.

Zurück zu deiner Frage: Um ein Bild unverzerrt darzustellen ist mit aktuellem HTML und CSS folgender Quelltext geeignet:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Stundenplan</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>

      * {
         min-width: 1px;
      }
      body {
         margin: 0;
      }
      .stundenplan {
         background-color: black;
         min-width: 1px;
         max-width: 100%;
         height: 100vh;
         min-height: 1px;
         margin: 0rem;
         display: flex;
      }
      .stundenplan img {
         display: block;
         max-width: 100%;
         min-width: 1px;
         max-height: 100vh;
         border: 0px;
         margin: auto;
      }

   </style>
</head>
<body>
   <figure class="stundenplan">
      <img src="stundenplan.jpg" alt="Stundenplan">
   </figure>
</body>
</html>

Alles anzeigen

thesecretboy

Hallo Mr. Murphy,

danke zunächst für Deine Hilfe.

Im Prinzip ist es so, dass dieser Stundenplan tatsächlich ein Bild ist, dass aus einem Excel heraus generiert wird. Mir wäre das anders auch lieber, aber hier gibt es leider ein paar andiquierte Ansichten, von denen nicht abgerückt werden soll.

Der Plan wird derzeit auf USB-Sticks kopiert, dann wird zu den Fernsehern gerannt, der Stick angesteckt und dann über den Mediaplayer des Fernsehers das Bild aufgerufen. Eine Ansicht auf anderen Geräten als diesen Fernsehern hier im Haus findet nicht statt und ist auch nicht vorgesehen.

Da sich der Stundenplan (der auch ein Raumplan ist) aber mehrfach täglich ändern kann, rennen die Damen dann rum, sammeln die Sticks wieder ein, kopieren das aktualisierte Bild drauf und rennen dann wieder zu den Fernsehern um den Strick wieder einzustecken und das aktualisierte Bild abzubilden.

Nun sind wir so weit, dass wir kleine Raspberrys ausbringen werden und die Fernseher dann eben eine HTML-Seite abbilden werden, die sich per Meta Refresh alle 15 Minuten oder so selbst aktualisiert und das Bild dann neu vom lokalen Server holt. Im Test klappt das auch einwandfrei. Nur bei der Abbildung des Bildes hatte ich genannte Probleme.

Danke dir trotzdem sehr!
LG

Bild mit maximaler Höhe von 100%

Ähnliche Themen

Anki - Bild zentrieren bei maximaler Größe