Question

感谢大家的回复我相信我只需要更大的图片，它不是覆盖整个高度，我在网上阅读有关图像尺寸如何不重要的事情，但我想他们确实如此。再次感谢大家* 这已经解决了

嘿伙计们我创造了一个可以正常使用的滑块。但它不会让我以100％的高度做到这一点有人可以帮助我吗？我只使用HTML和CSS。我已经尝试过做body, html {height: 100%; }并且没有工作，并尝试将其设置为最大高度/最小高度并将其设为vh但到目前为止没有任何工作。

＆＃13;

#slider{
	overflow:hidden;
	width:50%;
	float:left;
	margin:0;
	-webkit-box-flex: 0; 
	height:100%;
}

#slider figure img{
	width:25%;
	float:left;
}

#slider figure{
	position: relative;
	width: 400%;
	margin:0;
	left:0;
	text-align:left;
	font-size:0;
	animation: 20s slidy infinite;
}

@keyframes slidy {
	0% { left: 0%; }
	20% { left: 0%; }
	25% { left: -100%; }
	45% { left: -100%; }
	50% { left: -200%; }
	70% { left: -200%; }
	75% { left: -300%; }
	100% { left: -400%; }
}

＆＃13;

<div id="slider">
	<figure>
		<img src="pics\art1.jpg" />
		<img src="pics\art2.jpg" />
		<img src="pics\art3.jpg" />
		<img src="pics\art4.jpg" />
	</figure>
</div>

＆＃13;

Answer 1

您可以使用视口高度和视口宽度height:100vh和width:100vw。

Answer 2

#slider {
  overflow: hidden;
  width: 50%;
  float: left;
  margin: 0;
  -webkit-box-flex: 0;
  background: silver;
  height: 100vh;
  display: block;
  position: absolute;
}

https://jsfiddle.net/MadalinaTn/vvse26ns/6/

Answer 3

下面的属性应该可以使它工作。

body {
    margin: 0;
    padding: 0;
}

#slider {
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
}

这是工作JSFiddle

Answer 4

设置min-height: 100%和witdh:auto，

#slider{
    overflow:hidden;
  width:auto;
  float:left;
  margin:0;
  -webkit-box-flex: 0; 
  min-height:100%;
  height: 100%;
}

在 FF 和 Chrome

中进行了测试

如何制作具有网页高度的滑块？

4 个答案: