18

ページの上部に挿入された 1920x100 の画像があります。

<img src="./Resources/Images/banner.jpeg" style="position:absolute; top:0px; left:0px; height:100px; width:100%;" name="top">

ページが水平方向にサイズ変更されたときに、画像がページに合わせて縮小されず、次のように画面の中央に残るようにしたいと思います。

ここに画像の説明を入力

簡単に達成できる簡単なことのように思えますが、解決策は見つかりませんでした。

画像を div 内に配置し、div の左位置を -(1920-pageWidth) / 2 に設定することもできますが、これは JavaScript に依存します。ページの複雑さを最小限に抑え、ブラウザーの互換性を最大化するためだけに、よりクリーンなソリューション (ある場合) を探しています。

これを達成するために使用できる CSS プロパティはありますか、それとも完全に間違った方法でこれを達成していますか?

どんな助けでも感謝します。

4

5 に答える 5

8

この css プロパティをイメージに追加できます。min-width: 1280px

于 2012-05-18T15:12:14.403 に答える
6

CSSあり

div {
  background: url(./Resources/Images/banner.jpeg) no-repeat scroll center top transparent;
  height: 100px;
}
于 2012-05-18T15:19:57.627 に答える
2

画像をとしてbackground-image使用し、background-position center 0値を使用して要素の中央上部に配置します。

このjsFiddleを参照してください。

于 2012-05-18T15:29:53.843 に答える
1

このようなものはどうですか。( には画像幅の半分を使用margin-left)

HTML:

<div id='wrapper'>
  <img src='./Resources/Images/banner.jpeg' id='banner'>
</div>

CSS:

#wrapper{overflow:hidden;position:relative;}
#banner{position:absolute;top:0;left:50%;margin-left:-960px;}

これは、divを使用してそれを示すフィドルです（の幅を変更します#wrapper）： http://jsfiddle.net/mestekweb/mDkrE/

于 2012-05-18T15:20:04.423 に答える
0

要素を使用する代わりに、img背景画像と同じ画像を使用し、中央に配置します。常に中央に配置されますが、要素が画像よりも小さい場合は切り取られることがあります。また、要素が大きくなった場合に備えて、background-repeat を no-repeat に設定する必要があります。

div { 
  background: url(/to/img) no-repeat 50% 0;
  margin: 0 auto;
}
于 2012-05-18T15:19:56.037 に答える