html - CSS图像缩放而不被裁剪

Question

我在首页上有一张 960x200 像素宽的图片。它在一个 div 标签中。当我按 ctrl+scrolling 缩放页面时，会发生什么情况，图像会超出页面、屏幕并被裁剪掉。我怎样才能做到当我缩放页面时，比如 amazon.com 或其他网站，页面不会被裁剪，而是在浏览器底部出现一个水平滚动条？

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

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

Answer 1

发生这种情况是因为您的图片是 background-image。

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

如果您不希望发生这种情况，请将您的 div#header 明确设置为 960 像素宽。