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％，将高度设置为auto，这似乎是可接受的方法。奇怪的是，每当我使高度不是px值时，图像就会消失！

网站的某些其他方面可能会阻止调整大小的发生吗？

任何见解都表示赞赏。

Answer 1

问题是.rt-container为空，所以当高度为自动（或除px之外的任何东西）时，div默认为0高度（空）。如果您将该图片从背景图片中删除并将其设为<img>标记，则可以应用width: 100%; height: auto; display: block;，并且该图片会正确缩放窗口。

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

1 个答案: