全屏图像预览不会垂直调整大小

我创建了一个简单的系统在我的网站上预览图像。预览以全屏视图打开，但图像应该水平和垂直调整大小。它会水平调整大小，但当我尝试垂直调整大小时，它会完全失败。全屏图像预览不会垂直调整大小

这里的小提琴：

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

全屏图像预览不会垂直调整大小

回答

相关问题