Responsive design 断开的响应图像

我一定错过了一些简单的东西。在编辑一个普通的Wordpress模板时，我决定在标题中添加一个背景图像。我需要的图像比例与响应设计，所以我设置我的最大宽度为100%，高度为自动。。没有显示任何内容。如果我将背景设置为与图像原始大小700 x 220相匹配的固定尺寸，那么一切都很好，除非我缩小网站或在移动设备上查看。请帮忙！作为参考，该网站是portlandtoraleigh.com，谢谢

CSS:

}

HTML:

简单！ CSS

希望我能帮上忙：

编辑：您可以选择使用：

background-position: center center;

使背景图像水平和垂直居中

在旁注中，如果您的图像没有显示，请尝试在括号之间添加引号；因此：

url('pathtoimage/image.png');

---

看来你用的是更难的方法。试试这个：

<img class="left-header" src="filepath/image.png" />

---

我更新了它，你可能需要在URL之间加引号，这是因为它被隐藏在Wordpress中：好的！我很久没用WP了。尝试将url更改为url'；您可能希望在调试内容时向图像容器添加最小高度。我知道路径是正确的，因为它在表达固定维度时工作正常。在左标题中键入一些内容，如：Hello，World如果图像显示，则您可以只添加颜色：transparent；仍然没有显示。检查它。移除它周围的div标签，这样就只有image标签了。然后将图像的src更改为Awesome，这就成功了。我的大脑一直处于可湿性粉剂模式，我忘记了基本的。。。非常感谢，我为我在这上面浪费了多少时间感到羞愧！没问题！今天，我花了更多的时间，然后我愿意在一个模板上承认：P

background-position: center center;

url('pathtoimage/image.png');

<img class="left-header" src="filepath/image.png" />

.left-header {
    width:100%;
    max-width:100%;
    height:auto
}