エントリーの編集

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
背景画像の縦横比率を維持したまま、コンテンツの幅に合わせて表示させる方法
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
背景画像の縦横比率を維持したまま、コンテンツの幅に合わせて表示させる方法
背景画像を表示させる際に、画像の見え方自体は固定しつつ、元の画像サイズ以上にブラウザを広げた時に... 背景画像を表示させる際に、画像の見え方自体は固定しつつ、元の画像サイズ以上にブラウザを広げた時には、画像の縦横比率を固定したままボックスごと拡大して表示させたい、そんな時に使える方法を紹介します。 CSS .sample { -moz-box-sizing: border-box; box-sizing: border-box; background: url(images/tanuki.jpg) center center no-repeat; background-size: cover; width: 100%; height: 500px; padding-top: 62.5%; } 表示サンプル サンプルhtml 背景画像の縦横比率を維持したままコンテンツの幅に合わせて表示のサンプル 各プロパティの説明 サンプルでは、800×500pxの画像を背景画像としています。 プロパティで