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

不确定您所指的示例是您尝试实现的内容还是您尝试修改的内容。

也许这example可以帮助你

重要的部分是：

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

2）将背景大小设置为＆＃39;包含＆＃39;

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

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

1 个答案: