Html 如何使用响应WP主题调整标题图像的大小

我试图在我的WP网站上使用Enigma主题

它允许你添加一个大约200px宽的徽标，该徽标与网站的响应能力相匹配

但是，我想上传一张更宽的图像，然后随着屏幕变小，图像的大小也随之改变

我在图像文件中添加了一个类，并尝试使用css将其作为目标

max-width: 100%;
height: auto;

我熟悉媒体查询，但我所做的一切都不管用

这里是主题，这是一个示例站点，不是我正在工作的真实站点，但它呈现了相同的问题

---

我删除了我在这方面的工作，只是为了显示主题原样。

由于引导程序的流体系统列，您的图像位于一个6col col-md-6中，根据定义，该类不能占用更多的空间或小于她父母在这一行的中等重量

我不是Twitter Bootstrap的用户，但我认为您应该将header.php更改为两行和完整的img：

<div class="row ">
    <div class="col-md-6 col-sm-12">                    
        <div class="logo">                      
            <a href="http://bestgirlsonearth.com/" title="Best Girls on Earth" rel="home">
                <img src="http://bestgirlsonearth.com/wp-content/uploads/2014/10/bgeheader3.png" style="height:182px; width:1023px;">
            </a>
            <p>The finest women on the planet</p>
        </div>
    </div>
    <div class="col-md-6 col-sm-12">
        <ul class="head-contact-info">
            //you contact info
        </ul>   
    </div>
</div>

据此：

    <div class="row ">
        <div class="col-md-12 col-sm-12">                   
            <div class="logo">                      
              <a href="http://bestgirlsonearth.com/" title="Best Girls on Earth" rel="home">
               <img src="http://bestgirlsonearth.com/wp-content/uploads/2014/10/bgeheader3.png" style="/* height:182px; */ /* width:1023px; */"></a>
               <p>The finest women on the planet</p>
            </div>
        </div>
    </div>
    <div class="row">
      <div class="col-md-12 col-sm-12">
        <ul class="head-contact-info">
          // Your contact infos
        </ul>   
      </div>
    </div>

干杯，

增加重要高度最大宽度：100%；高度：自动！重要的