标题背景图像没有像我期望的那样调整大小 - 想法？答案

【问题标题】：Header background image not resizing as I would expect - ideas?标题背景图像没有像我期望的那样调整大小 - 想法？
【发布时间】：2015-09-02 13:45:37
【问题描述】：

我有一个网站，我试图在调整浏览器窗口大小时使其表现得体面。例如，我希望在有人缩小浏览器窗口时调整横幅图像的大小。该网站是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 值以外的任何值时，图像都会消失！

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

感谢任何见解。

【问题讨论】：

我的回答解决了你的问题吗？如果确实如此，请不要忘记接受。如果没有，您能否进一步澄清，以便我们提供帮助？

标签： css responsive-design

【解决方案1】：

问题是.rt-container 是空的，所以当高度为自动（或除 px 之外的任何值）时，div 默认为 0 高度（空）。如果您将该图像从背景图像中取出并使其成为<img> 标签，那么您可以应用width: 100%; height: auto; display: block;，它将正确地随窗口缩放。

【讨论】：