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

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>