gpt4 book ai didi

html - 将 div 缩放到浏览器高度 vh 麻烦

转载 作者:行者123 更新时间:2023-11-28 03:27:41 25 4
gpt4 key购买 nike

我希望我的 div 中的内容随着浏览器垂直缩放,以防止需要滚动图像将是不同的方向,因此宽度将不同。我知道这可以通过 width:100%; 水平实现。但最大高度:100%;或高度:自动;对我来说,两者都超出了浏览器窗口,我不确定为什么。

编辑:这里有很多额外的模态代码,并将其简化为 html/css,并从简单的 width:100% height: 100% 切换为 vh 和 vw。

fiddle :https://jsfiddle.net/duckyduck/6soe8zs0/

发生了什么: enter image description here

我希望它看起来如何: enter image description here enter image description here

<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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com