web-dev-qa-db-ja.com

CSS背景画像-固定サイズdivに合わせて縮小

https://jsfiddle.net/ncrcfduz に次のコードがあり、 https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg に背景画像があります。 divに合うように背景画像のサイズを変更する必要があります。これは、画像内のほとんどの「中央」コンテンツを表示するのに適しています。次のコードは、画像の左上隅のみを示しています。

.container {
  background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 150px;
  width: 300px;
}
<div class="container">
</div>
csscss3backgroundbackground-image
12
user1187968

coverではなく、background-size: contain（ MDNエントリを参照 ）を探しています。サンプルを機能させるには、background-attachment: fixedを削除する必要があります。 background-position: centerを使用して、背景をdivの中央に配置します。

.container{
    background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    
    height: 150px;
    width: 300px;
}
<div class="container">
</div>

ノート：

  • 最近では、ほぼ確実にブラウザのプレフィックスは必要ありません。つまり、background-size: containだけを使用できます。 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility を参照してください

  • Autoprefixer （多くのビルドツールとビルドセットアップに含まれています）を使用している場合、必要なプレフィックス付きバージョンが自動的に追加されます。つまり、メジャーの現在のバージョンであってもbackground-size: containブラウザにはまだプレフィックスが必要です。

  • 構文background: <background-position>/<background-size>を使用して、background短縮形プロパティにサイズを含めることができます。それは次のようになります

.container{
    background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center/contain;

    height: 150px;
    width: 300px;
}
31
henry

あなたが使用する必要があります：

.container{
    background-size: 100%;
}
2
Anonoymous

「バックグラウンド」命令で「固定」を「中央」に置き換えるだけです。

そのように：

background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center;

ここのJSFiddle： https://jsfiddle.net/ncrcfduz/2/

1
AymericM