如何使徽标保持居中并随着浏览器调整大小而缩小以适合

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;

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

Answer 1

不确定您指向的示例是您试图实现的还是您试图修改的。

也许这个example可以帮到你

重要的部分是：

1) 使包含徽标的元素作为背景获取所有 space 可用

2) 将背景大小设置为 'contain'

<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;
}

如何使徽标保持居中并随着浏览器调整大小而缩小以适合

How to make logo stay centered and shrink to fit as browser resized

css

wordpress

responsive-design

genesis