我创建了一个简单的系统在我的网站上预览图像。预览以全屏视图打开,但图像应该水平和垂直调整大小。它会水平调整大小,但当我尝试垂直调整大小时,它会完全失败。全屏图像预览不会垂直调整大小
这里的小提琴:
我会很感激一些帮助与此有关。当我给予fullscreenImageContainer
100%身高时,垂直调整大小似乎可行。问题是关闭按钮不会位于图像的右上角。
我创建了一个简单的系统在我的网站上预览图像。预览以全屏视图打开,但图像应该水平和垂直调整大小。它会水平调整大小,但当我尝试垂直调整大小时,它会完全失败。全屏图像预览不会垂直调整大小
这里的小提琴:
我会很感激一些帮助与此有关。当我给予fullscreenImageContainer
100%身高时,垂直调整大小似乎可行。问题是关闭按钮不会位于图像的右上角。
有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">
谢谢,这个解决方案完全解决了我的问题! –
@ 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>
你拨弄不显示我什么。 –