css - 页眉背景图像未按我的预期调整大小 - 想法？

Question

我有一个网站，我试图在调整浏览器窗口大小时使其表现得体。例如，我希望在有人缩小浏览器窗口时调整横幅图像的大小。网址是http://www.pfp-consortium.org

顶部的横幅在 CSS 中指定为

#rt-showcase .rt-container {
    border-bottom: 0px none;
    height: 200px;
    width: 1200px;
    background: transparent url("/images/headerimgs/topimage.jpg") no-repeat scroll center center;

所以我知道固定的宽度和高度必须取消。在阅读该站点上的众多主题时，我尝试了各种推荐的方法。我尝试将宽度(和最大宽度)设置为 100%，将高度设置为自动，这似乎是公认的方法。奇怪的是，每当我将高度设为 px 值以外的任何值时，图像都会消失!

也许网站的某些其他方面阻止了我预期的大小调整？

任何见解表示赞赏。

Answer 1

问题是 .rt-container为空，因此当高度为自动(或除 px 以外的任何值)时，div 默认为 0 高度(空)。如果您将该图像从背景图像中取出并使其成为 <img> tag 然后就可以申请width: 100%; height: auto; display: block;它将正确地随窗口缩放。