我希望我的 div 中的内容随着浏览器垂直缩放，以防止需要滚动图像将是不同的方向，因此宽度将不同。我知道这可以通过 width:100%; 水平实现。但最大高度:100%；或高度:自动；对我来说，两者都超出了浏览器窗口，我不确定为什么。
编辑:这里有很多额外的模态代码，并将其简化为 html/css，并从简单的 width:100% height: 100% 切换为 vh 和 vw。
fiddle :https://jsfiddle.net/duckyduck/6soe8zs0/
发生了什么:
我希望它看起来如何:
<body>
<style>
.modal {
display: block;
position: fixed;
z-index: 1;
box-sizing:border-box;
left: 0;
top: 0;
height: 100%;
width:100%;
overflow:auto;
background-color:#D81E21;
}
.modal-content {
position: relative;/*modal x button */
width: auto;
height: auto;
background-color: #7E7DE1;
max-height: 50vh;
max-width:70vw;
margin: auto;
}
.mySlides{
max-height:100%;
max-width: 100%;
height:auto;
width:auto;
}
.roll-img {
display:flex;
flex-wrap:wrap;
}
.column {
flex:1;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
</style>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="mySlides">
<img src="images/5_2.jpg">
</div>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="roll-img">
<div class="column">
<img class="demo cursor" src="images/5_2.jpg">
</div>
</div> <!--roll-img-->
</div> <!--modal-content-->
</div> <!--myModal-->
</body>
最佳答案
因为你的 .modal-content 宽度是 30%。可能有帮助
.modal-content .mySlides img {
position: relative;
width: 100%;
height: auto;
}
使图像适合模型内容的 30% 宽度
关于html - 将 div 缩放到浏览器高度 vh 麻烦，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44895460/