web-dev-qa-db-ja.com

CSSでページが水平方向にサイズ変更されたときに画像の縮小を停止する方法

1920x100の画像がページの上部に挿入されています。

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

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

enter image description here

それは簡単に達成できる簡単なことのように思えますが、私は解決策を見つけていません。

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

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

助けてくれてありがとう。

htmlcssalignmentcentering
14
Jack Greenhill

CSSを使用

div {
  background: url(./Resources/Images/banner.jpeg) no-repeat scroll center top transparent;
  height: 100px;
}
6
yunzen

このcssプロパティを画像に追加できます：min-width: 1280px

5
gabitzish

画像をbackground-imageとbackground-positioncenter 0値を要素の中央上部に配置します。

これを見てください jsFiddle 。

1
GodLesZ

このようなものはどうですか？ （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/

1
Tom Pietrosanti

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

div { 
  background: url(/to/img) no-repeat 50% 0;
  margin: 0 auto;
}
0
Litek