没有裁剪的CSS图像缩放

Question

我在首页上有一张960x200像素宽的图像。它在div标签中。当我通过按住Ctrl +滚动缩放页面时，图像会缩小页面，离开屏幕，然后被裁剪掉。我怎样才能说明当我缩放页面时，如amazon.com或其他网站，页面不会被裁剪，而是在浏览器底部得到一个水平滚动条？

/* css */
#header { background-image: url('image.gif'); }

<!-- html -->
<div id="header"></div>

Answer 1

这是因为您的图片是background-image。

因此，图像的宽度不会被计算为页面宽度的一部分。

如果您不希望这种情况发生，请将div#header明确地设为960px。

Answer 2

您需要将标题图片作为HTML代码的一部分。

<div id="header">
    <img src="image.gif" width="960" height="200" />
</div>