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) background-size を「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;
}
于 2015-03-23T05:13:54.990 に答える