如何调整 div 相对于浏览器 window 的大小？

Question

我正在尝试制作一个根据浏览器 window 大小按比例调整大小的幻灯片，但我尝试的似乎没有任何效果。以下 HTML 和 CSS 是我使用的，因此当浏览器 window 调整大小时，幻灯片在我的页面上保持居中，但它不会但允许幻灯片调整大小。

我该怎么做？我最初的想法是简单地给 #parent div 一个 max-width 或 width 一定百分比，但它不起作用。我认为里面的所有东西，因为它们的宽度都设置为 100%，应该用 #parent div 调整大小，但它们没有。我什至不确定 #parent div 是否在调整大小...

img 很简单，它是我实际代码中六张图片的占位符，但这没有任何区别。

#parent {
 height:100%;
}

.fadein {
 position:relative;
 top:70px;
 width:100%;
 height:100%;
}

.fadein img {
 position:absolute;
 left:50%;
 top:50%;
 -webkit-transform: translate(-50%, -0%);
 -moz-transform: translate(-50%, -0%);
}

#slideshow {
 max-width:100%;
 width:100%;
 height:100%;
}

<div id="parent">
   
 <div id="slideshow">
   
  <div class="fadein">
    
   <img src="http://placehold.it/350x150" />
   
  </div>
   
 </div>
    
</div>

Answer 1

.fadein img 没有将宽度设置为 100%。又因为是绝对定位，宽度会参考window的宽度。不过这应该无关紧要，因为您的父 div 设置为 100%，所以无论哪种方式看起来都一样。

编辑：同样在将来当您遇到布局问题时，在您的 div 周围放置边框真的很有帮助。如评论中所述

Answer 2

要使 height: 100%; 成为视口 的高度 ，您需要在所有向上的元素上设置 height: 100%，包括 <html> 和<body>...最有可能的是，您最好使用固定覆盖和测量 100vh。您可以在这里找到有关 vh 单元的有用信息以及 height: 100% 的真正含义：Percentage Height HTML 5/CSS

Answer 3

您的 img 标签需要调整大小。它将独立于父容器运行。

#parent {
 height:100%;
}

.fadein {
 position:relative;
 top:70px;
 width:100%;
 height:100%;
}

.fadein img {
 position:absolute;
 left:50%;
 top:50%;
 -webkit-transform: translate(-50%, -0%);
 -moz-transform: translate(-50%, -0%);
}

#slideshow {
 max-width:100%;
 width:100%;
 height:100%;
}

#slideshow img {
    width: 100%;
}

<div id="parent">
   
 <div id="slideshow">
   
  <div class="fadein">
    
   <img src="http://placehold.it/350x150" />
   
  </div>
   
 </div>
    
</div>

Answer 4

#parent {
height:200px;
  width:300px;
  position:relative;
}
#slideshow {
  position:absolute;
  left:0;
  top:0;
width:100%;
height:100%;
}
.fadein {
  position:fixed;
  left:0;
  top:0;
width:100%;
height:100%;
}
.fadein img {
position:absolute;
left:50%;
top:50%;
-webkit-transform:translate(-50%, -0%);
-moz-transform:translate(-50%, -0%);
  width:100%;
  height:100%;
}

如何调整 div 相对于浏览器 window 的大小？

How do I resize a div relative to browser window size?

javascript

css

resize

window