javascript - 如何根据浏览器窗口大小调整 div 的大小？

Question

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

我该怎么做呢？我最初的想法是简单地给 #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%。同样因为它是绝对定位的，所以宽度将指的是窗口的宽度。不过这应该无关紧要，因为您的父级 div 设置为 100%，所以两种方式看起来都一样。

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