0

我在使用全屏背景图像的网站上遇到图像顶部和底部被截断的问题。我最初认为 padding: 0px 和 margin: 0px 属性（为 html 设置，CSS 中的 body）是罪魁祸首，但我尝试删除这些无济于事。应该指出的是，这种布局是从其他地方借来的。有一个单独的 .js 文件，其中没有任何样式，可以旋转背景图像。

我的 CSS 的哪些部分是问题，我如何调整以使整个图像始终可见，而不管我使用的是哪个图像？

此布局的任何响应式设计指针的奖励积分:-)

相关HTML：

<html>
<body>
<div id="main_wrapper">
<div id="fullscreen">
    <div id="backgroundImage">
        <div style="visibility: visible; opacity: 1;" id="homebg">
          <table cellpadding="0" cellspacing="0">
            <tbody><tr>
              <td>
                <img src="images/bg.jpg">
              </td>
            </tr>
          </tbody></table>
        </div>
      </div>
 </div>
</div>
</body>
</html>

相关CSS：

html, body {   margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
#main_wrapper   { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; text-align: left; z-index: 0; }
#backgroundImage, 
#backgroundImage table, 
#backgroundImage td     {height: 100%; overflow: hidden; width: 100%;}
#backgroundImage      {position:relative;}
#fullscreen {
  position:fixed;
  width:100%;
  height:100%;
  z-index:-200;
}
#backgroundImage div { 
  height: 200%;
  left: -50%;
  position: absolute;
  top: -50%;
  width: 200%;
  z-index: -200;
}
#backgroundImage td {
  text-align: center;
  vertical-align: middle;
}
#backgroundImage img {
  margin: 0 auto;
  min-height: 50%;
  min-width: 50%;
  -ms-interpolation-mode: bicubic;
}
4

1 回答 1

0

只需删除 css 的所有部分并仅保留 html，正文部分样式。

并在标签中添加宽度 100%，如下所示

<img src="images/bg.jpg" width="100%" />
于 2013-03-30T06:00:13.567 回答