如何使徽标保持居中和收缩以适应浏览器的调整

Question

在这里尝试：http://alternativegrow.com.au/

使徽标保持居中和缩小，以适应浏览器调整大小(而不是被切断)。我遵循了一些推荐的技巧，但都没有用.

我有点不确定我添加或修改了哪些元素正在帮助或阻碍。

我现在通过自定义css插件添加了什么：

    .header-image .site-title > a {
    float: left;
    max-width: 100%;
    height: auto;
    background-size: 100% auto !important;
    background-position:center; 
}

    .title-area {
    float: left;
    padding: 10px 0;
}

.site-header .wrap {
  padding: 10px 0;
}

样式表中的内容：

/* ## Title Area
--------------------------------------------- */

.title-area {
    float: left;
    padding: 10px 0 10px 15px;
    width: 360px;
}

.header-full-width .title-area {
    width: 100%;
}

.site-title {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
}

.site-title a,
.site-title a:hover {
    color: #fff;
}

 .header-image .site-title > a {
    background: url(images/logo.png) no-repeat left;
    float: left;
    min-height: 160px;
    width: 350px;
} 

.site-description {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
}

.site-description,
.site-title {
    margin-bottom: 0;
}

.header-image .site-description,
.header-image .site-title {
    display: block;
    text-indent: -9999px;
}

.site-description {
    color: #fff;

编辑-哦，我确实尝试了媒体查询，但它们也没有工作。具体来说，我尝试在不同的喙点调整最小高度，宽度设置为自动，期望宽度相对于高度设置进行调整，但实际上，当我这样做时，徽标就消失了。我真的不想使用多个大小的标志作为不同的断点，因为这似乎是笨重的，但它比这里更好，但这也不适用于我。

Answer 1

不一定要理解你所指的例子是你要达到的目标还是你想要修改的。

也许这个示例能帮你

重要的部分是：

1)使以徽标为背景的元素占用所有可用空间。

2)将背景大小设置为“包含”。

<header>
  <div class="logo"></div>
</header>

.logo{
  background:url('http://www.vectortemplates.com/raster/batman-logo-big.gif') no-repeat center;
  width: 100%;
  height: 100%;
  background-size:contain;
}

header{
 height:200px;
}