調整爲可變圖像大小的HTML/CSS圖像框（彈出窗口）

Question

我試圖在黑暗的背景上創建一個框來顯示內容上的圖片（與許多網站一樣）。屏幕上應該有一個黑色填充（OK），一個框在畫面中心（OK），框邊框和圖片之間有一個1em的空間。圖片可以是縱向或橫向，並且應該調整大小，使其不超過90％的高度和寬度（保持比率）。我想這樣做純粹是在CSS/HTML，沒有JavaScript的（如果可能）My goal

這裏是我目前擁有的代碼：

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%; 
} 

當前問題：

• 風景圖片在左右側獲得1em以上的邊距，但在
之上和之下有適當的邊距
• 人像照片忽略最大高度並且大於屏幕。

Answer 1

使用自動與您的CSS img高度。

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

如果您需要其他解決方案，像adaptive-images之類的東西可能是需要研究的東西。