全屏圖像預覽不會垂直調整大小

Question

我創建了一個簡單的系統來預覽網站上的圖像。 預覽以全屏視圖打開，但是圖像應同時調整水平和垂直大小。 它確實會水平調整大小，但是當我嘗試垂直調整大小時，它會完全失敗。

這是小提琴：

小提琴

我希望對此有所幫助。 當我給fullscreenImageContainer 100％的高度時，垂直調整大小似乎可以工作。 問題在於關閉按鈕將不會位於圖像的右上方。

Answer 1

您需要套用/調整4個屬性。 max-width ， max-height ， width和height

1. width: auto; 調整寬度以保持原始長寬比-即不拉伸
2. height: auto; 調整寬度以保持原始長寬比
3. max-width: 90vw; 確保對象或預覽div永遠不會超過屏幕寬度的90％。
4. max-height: 90vh; 確保對象或預覽div不會超過屏幕高度的90％。

結合使用這四個對象，該對象將始終處於完全可見的狀態，並且您無需滾動屏幕。

工作示例：（全屏打開，嘗試垂直或水平調整大小以查看效果）

 body { background: #111; margin: auto; padding: 0; text-align: center; } .adjust { width: auto; height: auto; max-width: 90vw; max-height: 90vh; margin: 0 auto; } 

 <img class="adjust" src="https://unsplash.it/2600/2600"> 

Answer 2

您可以為圖像使用vh和vw size屬性（.descCoverFullscreen .fullscreenImageContainer img），vh代表視口高度，vw代表視口寬度。

 .descCoverFullscreen { cursor: pointer; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; display: block; background-color: black; } .descCoverFullscreen .fullscreenImageContainer { max-width: 100%; max-height: 100%; position: relative; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 50%; left: 50%; display: inline-block; } .descCoverFullscreen .fullscreenImageContainer img { height: 100vh; width: 100vw; max-width: 100%; max-height: 100%; position: relative; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); top: auto; left: auto; } .descCoverFullscreen .fullscreenImageContainer button.close { position: absolute; top: 3px; right: 3px; left: auto; bottom: auto; } .remove-icon { width: 15px; height: 15px; stroke: #fff !important; stroke-width: 2; cursor: pointer; } 

 <div class="descCoverFullscreen"> <div class="fullscreenImageContainer"> <img src="http://hdqwalls.com/wallpapers/think-twice-code-once.jpg"> <button type="button" class="close" aria-hidden="true"> <svg class="remove-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <g transform="translate(0,-1036.3622)"> <path d="m 2,1050.3622 12,-12"></path> <path d="m 2,1038.3622 12,12"></path> </g> </svg> </button> </div> </div>