[解決済み] 背景画像をdivにフィットさせる
2022-03-22 07:41:25
質問
以下のdivに背景画像を入れているのですが、画像が切れてしまいます。
<div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">
背景画像を切り取らずに表示する方法はありますか?
解決方法は?
で実現できます。
background-size
プロパティは、現在では
ほとんどのブラウザでサポートされている
.
背景画像をdivの中に収まるように拡大縮小すること。
background-size: contain;
背景画像をdiv全体を覆うように拡大縮小する。
background-size: cover;
また IE 5.5+ 対応のフィルタ と同様に 一部の旧ブラウザのベンダープレフィックス .
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] cssのfit-contentで横幅を自動サイズ調整する
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか?
-
[解決済み] div 内の画像を縦に並べる方法
-
[解決済み] 同じ要素にbackground-imageとCSS3グラデーションを組み合わせるにはどうすればよいですか?
-
[解決済み] input type="date "のフォーマットを変更する方法はありますか?
-
[解決済み] div 内で画像を水平方向にセンタリングする
-
[解決済み] 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 実装 サイバーパンク風ボタン
おすすめ
-
Uncaught TypeError: document.getElementsById は関数ではありません。
-
[解決済み] BootstrapのCollapse Navbarが動作しない
-
[解決済み] <meta charset="utf-8"> vs <meta http-equiv="Content-Type">.
-
[解決済み] Sublime Text 2を使ってHTMLコードを再フォーマットするにはどうしたらいいですか?
-
[解決済み] HTMLの "role "属性は何のためにあるのですか?
-
[解決済み] 特定のクラスや属性を持たない要素を選択するCSSセレクタは書けますか?
-
[解決済み] Bootstrap 3 の sr-only とは何ですか?
-
[解決済み] 残りの幅を埋めるためにdivを展開する
-
[解決済み】divの高さを背景サイズに自動調整させるには?
-
[解決済み] IEでbackground-sizeを動作させるには?