Question

I have a website here对于朋友而言，对于我的生活，我无法弄清楚如何将该徽标调整为宽度为300px。我可以调整.site-title的大小，但是没有调整徽标的大小，我没有img标签可以工作，因为它被设置为wordpress的标题图像。

一旦屏幕尺寸达到400px，我无法找到正确的css语句来获取该徽标以调整其大小。

HTML

<div class="wrap">
 <div class="title-area">
  <p itemprop="headline" class="site-title">
   <a title="Insideout Fitness" href="http://ambergoodwindraft.com/insideoutfitnessdraft/">Insideout Fitness</a>
  </p>
 </div>
</div>

CSS - 很难将css展示给我，其中一些来自wordpress主题。

.header-image .site-title a {
    height: 130px;
    margin: 1em 0;
    max-width: 417px;
}

我认为这种方法可行，但它没有

@media only screen and (max-width: 320px) {

    .header-image .site-header .title-area .site-title a {
        background-size: contain !important;
    }

}

感谢任何帮助。

Answer 1

试试这个

@media only screen and (max-width: 320px) {
    .header-image .site-title a {
           background-size:contain!important;            
           height: auto !important;
           margin: 0;
          max-width: 417px;
          padding: 11% 0;
    }
}

就我而言，我通常在响应时使用img in logo因为img显示顺畅的方式。你在锚点背景图像，根据我的经验，很难让你的徽标以平滑的方式显示，但只需尝试我的代码。让我知道输出。

Answer 2

从您网站的head中取出样式;这将覆盖您放在样式表中的任何内容。在 style.css 中，您需要以下内容：

.site-title a {
    background: url("http://ambergoodwindraft.com/insideoutfitnessdraft/wp-content/uploads/2014/02/insideout-fitness-logo.png") no-repeat 0 0 / 300px auto;
}

当然，如果您只想在移动设备上将其宽度调整为300px，则需要将其置于媒体查询中。否则......为什么不将图像大小调整到合适的大小，然后重新上传呢？

调整小屏幕尺寸的徽标不起作用

2 个答案: