Question

我正在尝试制作相对于浏览器窗口大小按比例调整大小的幻灯片，但我尝试的任何内容似乎都无法正常工作。以下HTML和CSS是我使用的，因此当调整浏览器窗口大小时幻灯片显示在我的页面上居中，但它还不允许幻灯片显示调整大小

我该怎么做呢？我原来的想法只是给#parent div一个百分比max-width或width，但它不起作用。我认为里面的所有内容，因为它们的宽度都设置为100％，应该使用#parent div调整大小，但它们不会。我甚至不确定#parent div是否正在调整大小...

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

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

Answer 1

.fadein img没有将宽度设置为100％。另外，因为它是绝对定位的，宽度将指的是窗口的宽度。这应该无关紧要，因为你的父div设置为100％，所以任何一种方式看起来都一样。

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

Answer 2

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

Answer 3

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

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

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的大小？

4 个答案: