【发布时间】：2013-03-30 14:00:13
【问题描述】：
我在使用全屏背景图像的网站上遇到图像顶部和底部被截断的问题。我最初认为 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;
}
【问题讨论】：
-
你在哪个浏览器上测试？
-
Chrome（版本 25.0.1364.172 m）
-
你真正想要达到什么目的？旋转背景是什么意思？
-
为了澄清我所说的旋转背景的意思，.js 文件从一组照片中交替显示网站的背景图像（每 15 秒）。
标签： html css image fullscreen image-scaling