Wordpress 标题不使用不同设备调整大小答案

【问题标题】：Wordpress header not resizing with different devicesWordpress 标题不使用不同设备调整大小
【发布时间】：2013-05-01 03:57:43
【问题描述】：

首先，如果我在错误的地方发布了这个，我深表歉意。

我正在为客户开发一个网站，并且正处于几乎可以发布的阶段，除了一些小的调整。

我正在使用 wordpress 开发网站 - 我以前从未使用过 wordpress，所以我在不断学习，我很高兴客户能理解这一点。

我遇到的问题与标题图片有关。我已经通过进入Appearance->Header 上传了一个标题图片并选择了一个存储在我的硬盘上的图片。

标题在我的 PC 上看起来非常好，但是当我在手机上打开网站时，标题图像并没有按比例缩小，并且横幅上的文字（位于左侧）消失了，所以你看到的只是一半标题横幅看起来不太好。

我使用Mantra 作为主题，并且响应能力在我的手机上运行良好，但标题图像从未调整大小。

我在这里花了一些时间尝试其他人的建议，最常见的解决方案在这里找到：Link 但是我不确定要在哪个 CSS 文件中添加代码。

如果有人能指出我正确的方向以便我能够克服这个问题，我将不胜感激。

【问题讨论】：

向我们展示一些围绕标题图像和 CSS 的代码
@Andrew 感谢您的回复。我使用 Wordpress 上传了图像，而不是编写自己的 HTML 和 CSS，所以我不确定你想看哪一点。我对 HTML/CSS 非常有信心，但是我不确定要向您展示什么。正如我所说，我正在学习，到目前为止，这是一条相当坎坷的道路
显示链接然后到页面
@Andrew 该网站目前因维护而停机-我正在使用一个插件来阻止对该页面的公共访问。但是我使用了浏览器的开发工具，这是它与标题图像相关联的 CSS：#branding { background: url("http://www.mysite.co.uk/sites/design2/wp-content/uploads/2013/05/FINAL_BANNER2.png") no-repeat; width: 1100px; height: 200px; }
尝试使用图片的height：height:100%; 这可能会使它看起来有点拉伸。或者您可以使图像高度更高，如果它是背景图像，它将切断您需要的内容

【解决方案1】：

在标题中使用响应式 .. 在你的 CSS 中试试这个

.header {
background-size: 50%, auto
}

用你的改变 50%

编辑：

使用图片作为背景图片

【讨论】：

【解决方案2】：

尝试使用图像的height：height:100%; 这可能会使它看起来有点拉伸。或者你可以让图像高度更高，如果它是背景图像，它会切断你需要的东西

【讨论】：