ウィンドウに合わせてバナーのサイズを変更する必要があります。CSS

Question

自分のサイトのロゴ/バナーをコンテンツボックスに正しく合わせようとしています。 残念ながら、さまざまなコンピュータ解像度とウィンドウサイズで幅が異なって表示されています。

これはコンテンツボックス内のバナー広告でも起こります。

CSS

#logo { 
    max-width: 100%; 
    height: auto; 
    width: auto; 
} 

HTML

<div id="logo"> 
    <center> 
     <img src="logo.png" alt="Image of Traffic Monsoon"> 
    </center> 
</div> 

The website is here.

Answer 1

<center>はそうががそれを使用しない推奨されていません。

margin:autoとdisplay:blockではなく、非推奨center

#logo img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    width: auto; 
 
    margin:auto; 
 
    display:block 
 
}

<div id="logo"> 
 
    <a> 
 
    <img src="http://clubtrafficmonsoon.com/banner.gif" alt="Image of Traffic Monsoon"> 
 
    </a> 
 
</div>

したい場合の画像を中央に、あなたがimgないdiv

使用を対象とする必要があなたの問題を解決するにはこれをサイトのすべての画像に適用するには、次のようにします：

img { 
    max-width: 100%; 
    height: auto; 
    width: auto; 
} 

Answer 2

<main>要素またはwrapperクラスにページ全体をラップします。その要素にmax-widthを設定し、それ以降のすべての要素にwidth:100%を設定できます。ラッパーの名前divですべてのあなたを包むページ全体の

まず：

Answer 3

これを試してみてください。 <img>タグのようなインラインレベル要素をセンタリングするには

.wrapper { 
    margin: 0 auto; 
    width: 1574px; 
} 

#logo { 
    margin: 0 auto; 
    text-align: center; 
    width: 1331px; 
} 

#logo img{ 
    text-align: center; 
    width: 96%; 
} 

Answer 4

、あなたはあなたの例で、コンテナにtext-align:center;を設定することができます：

<div class="wrapper">your code here</div> 

そこで以下、このcssを適用

#logo { 
 
    text-align: center; 
 
}

<div id="logo"> 
 
    <img src="logo.png" alt="Image of Traffic Monsoon"> 
 
</div>

さらに、<center>を削除してください。廃止予定です。そして、その固有の幅がコンテナよりも大きい場合に自動的に収まるように縮小した画像を作るために以下の行を追加します。助けを

#logo img { 
    max-width: 100%; 
    height: auto; 
}