css - Wordpress 标题图像没有响应

Question

我仍在尝试掌握响应式网页设计的窍门。

随着浏览器变小，我无法缩放标题图像。

这是网站，

http://instreamenergy.com/strategic-partnerships/

如果我尝试制作 .header-image #header #title-area height:100% 或其他任何内容，它只会恢复为 20px 或其他东西并卡在那里。

任何提示都会很棒！谢谢

Answer 1

我认为您正在寻找 CSS3 属性，background-size 因为您的图像是 DIV 的背景图像。

• 拉伸和缩放 CSS 背景
• http://caniuse.com/background-img-opts

如果您使用的是图像标签，<img>您可以这样做：

img {
     max-width: 100%;
}

您还需要摆脱 CSS for #title-area. 看起来它不需要floated: left;或有overflow: hidden;。去掉， width改成height。添加到.min-heightno-repeatbackground

我会将其更新为：

#title-area {
     background: url(your-image.jpg) no-repeat;
     padding-left: 0;
     min-height: 386px;
     float: none;
     overflow: visible;
     background-size: 100% auto;
}