Question

我希望我的div内的内容与浏览器垂直缩放以防止需要滚动图像将是不同的方向，因此宽度将不同。我知道这可以通过宽度水平实现：100％;但最大高度：100％;或身高：汽车;两者仍然延伸到我的浏览器窗口，我不知道为什么。

编辑：这里有很多额外的模态代码，并将其简化为html / css并从简单宽度切换：100％高度：100％到vh和vw。

小提琴：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>

Answer 1

您的 .modal-content 宽度 30％。它可能会有所帮助

.modal-content .mySlides img {
   position: relative;
   width: 100%;
   height: auto;
}

以30％宽度的模型内容拟合图像

Answer 2

尝试使用

min-height：100vh;

vh指的是视口高度。

Answer 3

我可以通过应用4件事来获得所需的结果：

sap.ui.getcore().byId('myId')确保对象永远不会超过屏幕宽度的90％。
max-width: 90vw;确保对象永远不会超过屏幕高度的90％。
max-height: 90vh;调整宽度以保持原始宽高比
width: auto;调整宽度以保持原始宽高比

通过这四个组合，对象将始终完全在视野中，您无需滚动屏幕。

工作示例： （全屏打开并垂直或水平调整大小以查看效果）

＆＃13;

height: auto;

＆＃13;

body {
  background: #131418;
  margin: auto;
  padding: 0;
  text-align: center;
}

.adjust {
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 90vh;
  margin: 0 auto;
}

＆＃13;

将div扩展到浏览器高度vh麻烦

3 个答案: