Question

在使用全屏背景图片的网站上，我遇到了图片顶部和底部被切断的问题。我最初认为填充：0px和margin：0px属性（设置为html，CSS中的正文）是罪魁祸首，但我尝试删除这些无济于事。应该指出的是，这种布局是从其他地方借来的。有一个单独的.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;
}

Answer 1

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

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

<img src="images/bg.jpg" width="100%" />

为什么我的网站背景图片的顶部和底部被切断（全屏图像背景）？

1 个答案: