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

时间:2014-10-24 01:19:49

标签: html css wordpress

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

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

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

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

来定位它
max-width: 100%;
height: auto;

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

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

http://bestgirlsonearth.com

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

1 个答案:

答案 0 :(得分:0)

由于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>

欢呼声,