垂直對齊 div 並將圖像放入其中

Question

我想創建一個非常簡單的圖像查看器。 當您單擊縮略圖時，該縮略圖的大版本應在黑色背景上打開，不透明度為 0.8。 那畫面……

• 不得超過窗口高度的 80%。
• 不得超過窗口寬度的 80%。
• 應水平和垂直居中。
• 應始終保持縱橫比。
• 可能不是背景圖片。
• 不應使用 javascript 更改。

我最大的問題是當您在移動設備上檢查時，div 內圖像的高度超過了 80% 的窗口高度 (80wh)（請參閱 Chrome 的設備工具欄）。 最奇怪的是我的 div 工作正常：它的最大高度是 80vh ......這是我的代碼，也許有人看到了我犯的錯誤：

 #gallery { overflow: hidden; } .Gallery { align-items: center; background: rgba(0, 0, 0, 0.85); display: flex; justify-content: center; height: 100%; position: fixed; width: 100%; z-index: 10; } .Gallery-imageWrapper { max-height: 80%; max-width: 80%; position: relative; } .Gallery-close { background: rgb(21, 21, 21); color: rgb(255, 255, 255); display: block; font-weight: 700; height: 20px; line-height: 20px; position: absolute; right: 0; text-align: center; text-decoration: none; top: 0; width: 20px; } .Gallery-image { max-height: 100%; max-width: 100%; }

 <div class="Gallery"> <div class="Gallery-imageWrapper"> <a class="Gallery-close" href="#" title="Sluiten">x</a> <img class="Gallery-image" src="https://placehold.it/600x600" alt="Screenshot website Optiek Cardoen" title="Website Optiek Cardoen"> </div> </div>

我在圖像元素上嘗試了其他 CSS 屬性，例如對象適合度、寬度、高度、位置等，但似乎沒有任何解決方法。 任何人都可以幫助我嗎？ :)

謝謝！

Answer 1

如果您可以使用視口單位，請嘗試使用vmin - 等於vw和vh的較小者。

重點款式：

.Gallery-image {
  max-width: 80vmin;
  max-height: 80vmin;
}

完整演示：

 .Gallery { background: rgba(0, 0, 0, 0.85); display: flex; justify-content: center; align-items: center; position: fixed; left: 0; top: 0; height: 100%; width: 100%; z-index: 10; } .Gallery-imageWrapper { position: relative; } .Gallery-close { background: rgb(21, 21, 21); color: rgb(255, 255, 255); position: absolute; font-weight: 700; right: 0; top: 0; width: 20px; height: 20px; line-height: 20px; text-align: center; text-decoration: none; } .Gallery-image { max-width: 80vmin; max-height: 80vmin; }

 <div class="Gallery"> <div class="Gallery-imageWrapper"> <a class="Gallery-close" href="#" title="Sluiten">x</a> <img class="Gallery-image" src="https://placehold.it/600x600" alt="Screenshot website Optiek Cardoen" title="Website Optiek Cardoen"> </div> </div>

此外：

CSS 選擇器通常不區分大小寫； 這包括類和 ID 選擇器。 確保保持一致。