0

在这里尝试：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;

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

4

1 回答 1

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;
}
于 2015-03-23T05:13:54.990 回答