[WordPress] どのようにロゴ滞在中心ととしてブラウザーのサイズに合わせて縮小

スポンサーリンク

質問

ここでしようとしている: 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;

編集 – オハイオ州私はメディア クエリを試みました、しかし、彼らも動作しませんでした。具体的に私は調整しようとした別のくちばしのポイントで最小の高さと幅は auto に設定、幅と高さの設定を基準にして調整を期待してが、実際には、ロゴがちょうど消えたこれをしたとき。私は本当にしないようこれ私には、不格好なしかし、それは何よりも良いここでは、様々 なブレーク ・ ポイントを複数のサイズのロゴを使用するが、これも動作しませんでした私にとって

答え

をポイントする例が達成しようとするまたは変更しようとするかどうかを理解してください

この があなたを助けることができる多分

重要な部分は:

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

http://stackoverflow.com/questions/29203288/how-to-make-logo-stay-centered-and-shrink-to-fit-as-browser-resized

スポンサーリンク

Leave a Reply