0

私はブログを作成していて、画面の上部を埋めることを目的とした大きなヘッダー画像を持っています (1500px を超えるモニターを使用している場合を除く)。ただし、スクロール バーはヘッダー コンテンツをはるかに超えて空白を表示します。

Ipad で表示すると、ズームアウトして、コンテンツの横に余分なスペースが表示されます。幅が画像よりも大幅に大きいのはなぜですか?

サイトはこちら: http://beautyintheweeds.com/

HTML と CSS は次のとおりです。

<?php wp_head(); ?>
</head>

<div id="container" class="group">
<div class="outer"><div class="inner"><img src="http://theshalomimaginative.com/weeds/wp-    content/themes/journalist/images/longtop.jpg"/></div></div>

div.inner img { position: relative; left:-50%; }
div.outer {width: 900px; margin: 0 auto; overflow: visible;}
div.inner {display: inline-block; position:relative; right: -50%;}

このコードは、ヘッダーをコンテナの中央に配置するように機能しました。私の希望は、モニターが大きすぎない限り、ヘッダーが常に画面の上部に表示されることでした。画像を超えて余分なスクロールスペースを作成している理由はありますか?

ありがとう。

4

4 に答える 4

2

class="inner"スペースを占める要素です。内部の画像からサイズを取得しますが、相対位置を使用して要素の左側に画像を表示します。

そのメソッドを使用して要素を中央に配置する場合は、overflow: hidden;幅が設定されている場合と設定されていない場合のすべての div を配置して、使用可能なすべての幅を占有するデフォルトwidth: autoを使用するようにします。

于 2012-09-04T14:09:01.507 に答える
1

これを試して

#container {
width: 911px;
margin: 0 auto;
position: relative;
padding: 0 0 0 140px;
overflow: hidden;
}
于 2012-09-04T14:05:25.903 に答える
0

http://jsfiddle.net/pWDrD/

フィドルボックスの幅を大きくすると、スクロールバーがなくても画像の幅が自動的に大きくなります。私がどうやってそれをしたのか分かりますか？お知らせ下さい。そうでない場合は説明します。簡単に言えば、画像をモニターの100％に配置する場合は、幅が100％で、マージンが自動で、固定幅ではなく、位置がまったくないコンテナーに画像を配置する必要があります。

于 2012-09-04T14:10:55.917 に答える
0

私はそれらをコンテナから引き出します。マークアップで div.outer を div.container の上に移動し、div.outer、div.inner のすべての css を削除してから、text-align: center; を追加します。div.outer に変更し、div.inner を完全に削除します。

于 2012-09-04T14:16:18.167 に答える