1. ホーム
  2. css

[解決済み】レスポンシブCSSの背景画像について

2022-04-09 03:57:12

質問

私はウェブサイト(g-floors.eu)を持っており、背景(cssではコンテンツ用にbg-imageを定義しています)もレスポンシブにしたいのです。残念ながら、私はこれを行う方法についてのアイデアを持っていません。複数の画像を作成し、CSSの画面サイズを使用して画像を変更しますが、私はこれを達成するために、より実用的な方法があるかどうかを知りたいです。

基本的に私が実現したいことは、画像(透かし「G」付き)を少なく表示することなく自動的にサイズ変更することです。もちろん、それが可能であれば

のリンクをクリックします。 g-floors.eu

今までのコード(コンテンツ部分)

#content {
  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  position: relative;
  width: 85%;
  height: 610px;
  margin-left: auto;
  margin-right: auto;
}

解決方法は?

同じ画像をブラウザのウィンドウサイズに応じて拡大縮小したい場合。

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

幅、高さ、余白は設定しないでください。

EDIT 幅、高さ、マージンを設定しないという前の行は、ウィンドウサイズに合わせた拡大縮小に関するOPの最初の質問のことを指しています。他の使用例では、必要に応じて幅、高さ、余白を設定することができます。