0

Web ページの背景画像をブラウザ ウィンドウに合わせて拡大縮小するように設定して、元の縦横比が失われない (引き伸ばされる) ようにし、画像自体が基本的に中央に配置されるようにしたいと考えています。ウィンドウが十分に小さいサイズに達したら、画像が絶対に配置されている場合のデフォルトのように、右側だけでなく、左側と右側の両方で画像がオーバーフロー (消える) するようにします。

私が今行っていることの例を次に示します: http://jsfiddle.net/S59EW/2/

#background img {
  position: absolute;
  min-height:100%;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
}

（私が使用しているJavaScriptが適用されるため、画像は絶対に配置されたdiv内にある必要があります。）

jsfiddle ウィンドウのサイズを変更すると、ウィンドウを高くしすぎない場合にのみ、画像の縦横比が維持されることがわかります。次に、画像が縦に引き伸ばされます。

また、「高さ：自動」を削除すると、特定のポイントの後に画像のサイズ変更が停止し、右側/下部では消えますが、上部/左側では消えないことを除いて、同じことが得られます。

#background img {
  position: absolute;
  min-height:100%;
  width: 100%;
  top: 0;
  left: 0;
}

だから、私は必要です：

スクロールバーなしで常にウィンドウ全体を占める背景画像。縦横比を常に保つ画像。ブラウザの特定のサイズのしきい値を超えると、画像が左右にオーバーフローするため、基本的に中央に配置されたままになります。

みんな、ありがとう

4

2 に答える 2

0

これらの 2 つのオプションがあります。1 つだけですが、幅が狭いCSS必要があります。media queries

これが背景画像JSFIDDLEです。この画像では、希望どおりに正確にスケーリングされます。

最後に、ドラム ロールをお願いします。イメージをタグ自体にする必要があり、このように適切に動作する必要がある場合は、そのためのFIDDLEがあります。:p

まずCSS、

#background img {
  position: absolute;
  min-height:100%;
  width: 100%;
  height: auto;
  margin-top: -40%;
  top: 50%;
  left: 0;
}

@media only screen and (max-width: 1700px) {
  #background img {
    margin-top: 0;
    top: 0;
  }
}
于 2013-11-13T04:04:18.893 に答える