如何让图片铺满整个屏幕
0
悬赏园豆：10
[已解决问题]
解决于 2018-05-05 09:52
想在网页最顶端加上图片轮播，图片铺满整个屏幕，我给图片宽高设置100%，为什么不管用？？
问题补充：
.outer{
width:1920px;
height:100%;
overflow: hidden;
}
.inner{
width:60000px;
height:100%;
overflow: hidden;
}
.inner li{
width:1920px;
height:100%;
float: left;
position: relative;
}
.inner li img{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index: -1;
display:block;
}<div class="banner">
<div class="outer">
<ul class="inner">
<p>
<img src="images/banner1.jpg" alt="">
</p>
<p>
<img src="images/banner2.jpg" alt="">
</p>
<p>
<img src="images/banner3.jpg" alt="">
</p>
</ul>
</div>
最佳答案
0
设置成背景啊。
收获园豆：10
其他回答(8)
0
style="position:absolute; width:100%; height:100%; z-index:-1"
我就是这样写的，图片不出来，外面的div应该怎样写？？
@Wwwii: 图片是啥。看不到。。我这边网络限制。太大加载不出来、可以在浏览器F12里调试css、方便快捷
0
打开浏览器的 Developer Tool 查看一下，调试看看。
0
img{
width:100%;
height:100%;
}
js里面获取其页面的高度
设置图片的高度；
在后面加一个js
代码如下：
<script>
var list=document.querySelectorAll(".inner li")
var _height=document.documentElement.clientHeight;
for(var i=0;i<list.length;i++){
list[i].style.height=_height+"px"
}
</script>
0
<img src="images/1.png" width="100%" height="100%"/>
0
width:100%;
height:100%;
0
设置成背景是种不错的选择 可以试试
0
给body标签设置背景图
0
img的宽度百分百的情况下 高度默认是根据宽度增加而等比放大的 如果需要设置高度为屏幕的高度，则首先应该设置html和body的高度为100%
