HTML/CSS Bildbox (Popup) Anpassung an variable Bildergröße

Question

Ich versuche eine Box über einem dunklen Hintergrund zu erstellen, um ein Bild über den Inhalt zu zeigen (so viele Seiten). Es sollte eine dunkle Farbe sein, die den Bildschirm füllt (OK), eine Box, die auf dem Bildschirm zentriert ist (OK), mit einem 1em Abstand zwischen dem Rahmen und dem Bild. Das Bild kann im Hoch- oder Querformat sein und sollte so skaliert werden, dass es weder 90% Höhe noch Breite (Aufbewahrungsverhältnis) überschreitet. Ich versuche, die rein in CSS/HTML zu tun, ohne Javascript (wenn möglich) My goal

Hier ist der Code, den ich derzeit haben:

HTML:

<div id="picture_viewer_container" class="picture_viewer_container"> 
    <div id="picture_viewer_content" class="box"> 
     <span id="picture_viewer_content_close">Fermer</span> 
     <div id="picture_viewer_content_picture"> 
      <img src="data:image/jpeg;base64,xxx"> 
     </div> 
    </div> 
</div> 

CSS

.box { 
    background-color:#F6E9F7; 
    border:1px solid #E298EA; 
} 

.picture_viewer_container { 
    position:fixed; 
    background: rgba(0, 0, 0, 0.8); 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index:1000; 
    align-items: center; 
    display: flex; 
    justify-content: center; 
} 

#picture_viewer_content { 
    padding:1em 1em 1em 1em; 
    position:relative; 
} 

#picture_viewer_content_close { 
    position:absolute; 
    right:0; 
    top:0; 
} 


#picture_viewer_content_picture { 
    display:inline; 
} 

#picture_viewer_content_picture img { 
    max-width:90%; 
    max-height:90%; 
} 

Aktuelle Ausgaben:

• ein Querformatbild erhält mehr als 1em Rand auf der linken und rechten Seite, aber richtiger Rand über und unter
• ein Porträtbild ignoriert die maximale Höhe und ist größer als der Bildschirm.

Answer 1

Verwenden Sie automatisch mit Ihrer CSS img Höhe.

#picture_viewer_content_picture img { 
    max-width:90%; 
    height:auto; 
} 

Wenn Sie andere Lösungen benötigen, so etwas wie adaptive-images kann in etwas zu sehen sein.