3

背景画像として配置するアスペクト比 4:3 の画像があります。
私の最初の目的は、高さに応じてサイズを変更し、可変幅（高さに応じて）で、フルハイトの画像を作成することです。画像は中央に配置する必要があります。
たとえば、16:9 のビューポートを使用している場合、左右の空白スペースを中央に配置して背景画像を表示する必要があります。

別の方法を試しました (例として、16:9 ビューポートの 4:3 画像を使用)。
まず、タグに適用されたwithと withのbackground-size両方:containcover<body>

  • アスペクト比をcover尊重しますが、画像の上部と下部をトリミングします
  • ビューポート全体をカバーするcontainわけではなく、実際にはbody

を使用background-size: auto 100%;しても同じ効果が得られますcontain

これは私が使用したCSSコードです：

 body#home {
  background-image: url(../bg.jpg);
  background-size: auto 100%;
  -moz-background-size: auto 100%;
  -webkit-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
 }
4

2 に答える 2

0

CSS を更新します。

background-position: center center; /* needs horizontal and vertical positions */
background-size: contain; /* use contain so your image fits inside */
于 2013-07-26T15:53:38.590 に答える