0

我试图用小照片覆盖整个页面，但我发现我不能导致它们在页面中留下一些左右边距。

我没有使用 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;

4

3 回答 3

1

取你水平的图像数量，然后将每个图像的宽度指定为 (100 / numHorizo​​ntalImages)%，然后对高度执行相同的操作。如果你有 10 个水平图像和 5 个垂直图像，它看起来像这样：

img { width: 10%; height: 20%;}

于 2012-09-23T07:09:37.417 回答
1

您可以在不使用 Bootstrap css 的情况下实现这一点

here's the Css code for it 
 <ul>
    <li style="float: left; padding-left: 5px; padding-right: 10px; padding-bottom: 15px">
  <img/>
   <li style="float: left; padding-left: 5px; padding-right: 10px; padding-bottom: 15px">
   <img/>
   </li>
  </li>
   ...........
 </ul>

对于 Bootstrap 提供的图像边框，请参阅以下链接

http://css-tricks.com/using-css-for-image-borders/

于 2012-09-23T07:24:08.093 回答
1

您需要的是 CSS 重置：

http://www.cssreset.com/

您也可以尝试在 CSS 中的 body 元素中添加类似这样的内容作为快速修复：

body{
    padding:0;
    margin:0;
}

发生的事情是浏览器为填充和边距定义了一些默认值，我认为这就是您目前遇到的情况。

（还注意到“#home-decore”中有一个错字，“realtive”应该是“relative”，这可能会提供意想不到的结果）

于 2012-09-23T07:32:26.737 回答