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

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

這裏的小提琴：

Fiddle

我會很感激一些幫助與此有關。當我給予fullscreenImageContainer 100％身高時，垂直調整大小似乎可行。問題是關閉按鈕不會位於圖像的右上角。

來源

2017-07-04 Pe-Ter

你撥弄不顯示我什麼。 –

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

width: auto;調整寬度保持原有的縱橫比 - 即，沒有拉伸
height: auto;調整寬度保持原有的縱橫比
max-width: 90vw;保證了對象或預覽div不會超過屏幕寬度的90％。
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">

來源

2017-07-04 10:56:32

謝謝，這個解決方案完全解決了我的問題！ –

@ Pe-Ter沒問題。我很高興你對這個問題進行了排序。謝謝！ –

您可以使用VH和大衆大小屬性您的圖像（.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>

來源

2017-07-04 11:02:44

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

回答

相關問題