我试图用小照片覆盖整个页面,但我发现我不能,因为它们会在页面中留下一些左右边距。
我没有使用 js 来做这件事,只是 css 和 html:
<div class="container-fluid" id="wrapper">
<div id="home-decore">
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
etc ..
</div>
</div>
#wrapper{
background:red;
padding-top:5%;
min-height: 88%;
height: auto !important;
height: 88%;
}
#home-decore{
margin:0;
padding-top:60px;
left:0;
top:0;
position:realtive;
min-height: 100%;
height: auto !important;
height: 100%;
background:#000;
}
#home-decore img{
border-radius:2px;
border:0.3% solid white;
opacity:0.6;
width: 3.3333%;
overflow: hidden;
}
#home-decore img:hover{
opacity:1;
}
我想要的是让所有页面都适合 right:0;top:0;bottom:0;left:0;
最佳答案
取水平方向的图像数量,然后将每个图像的宽度指定为 (100/numHorizontalImages)%,然后对高度执行相同的操作。如果你有 10 张水平图像和 5 张垂直图像,它看起来像这样:
img { 宽度:10%;高度:20%;
关于css - BOOTSTRAP CSS 照片墙覆盖页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12550411/