Question

我正在尝试在我的WP网站上使用Enigma主题。

它允许您添加一个宽200微米的徽标，该徽标与网站的响应性一致。

但是，我想上传更宽的图像，然后随着屏幕变小而调整大小。

我在图像文件中添加了一个类，并尝试使用css

来定位它

max-width: 100%;
height: auto;

我熟悉媒体查询，但我没有做任何工作。

这是主题，这是一个示例网站，不是我正在处理的真实网站，但它提出了同样的问题。

http://bestgirlsonearth.com

我已经删除了我的工作，只是为了显示主题。

Answer 1

由于bootstrap的流体系统列，您的图像位于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>

欢呼声，

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

1 个答案: