[解決済み】レスポンシブ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の最初の質問のことを指しています。他の使用例では、必要に応じて幅、高さ、余白を設定することができます。
関連
-
[解決済み] font-face は OpenType 埋め込み許可チェックに失敗しました。パーミッションはインストール可能である必要があります。
-
[解決済み] Font Awesomeで2つ以上のアイコンを重ねる/重ねるには?
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] 同じ要素にbackground-imageとCSS3グラデーションを組み合わせるにはどうすればよいですか?
-
[解決済み] CSS 画像サイズ、どのように埋めるために、しかし、ストレッチしない?
-
[解決済み] CSSで背景画像を幅に合わせ、高さは比例して自動縮小する
-
[解決済み】CSSで複数の背景画像を表示させることはできますか?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】ダウンロードしたフォントのデコードに失敗しました。
-
[解決済み] "セレクタ(CSS)にIDを使うな "なら、IDの代わりに何を使えばいい?
-
[解決済み] font: inheritを使用する目的は何ですか?
-
[解決済み] Chrome で注入されたスタイルシートによる奇妙なスタイリングが発生する
-
[解決済み] グレーの透明な背景を設定する
-
[解決済み] CSS - div から画面の幅いっぱいまでオーバーフローさせる方法
-
[解決済み] Bootstrap 3でnavbar-static-topは何をするのですか?
-
[解決済み] ヘッダー付きCSSボックス
-
[解決済み] 子 div が親 div からはみ出さないようにする。
-
[解決済み] Font Awesomeで2つ以上のアイコンを重ねる/重ねるには?