cssにbackground-imageで画像を表示させる時、height:0;とpadding-top:○○％を使う場合と、height:○○px;で表示させる場合の違いについて

実現したいこと

height: 0;
padding-top: ○○％;
と
height: ○○px;
を使う場合の違いについて知りたい。

前提

模写サイトを利用しhtml/cssを勉強しています。
サンプルコードを見たところ、
cssでbackgroud-imageで画像を表示させ、それにheight: 0;　padding-top: ○○％;を使っているパターンと、height: ○○px;を使用しているパターンがありました。
これは意味があってそうしているのか、それともこういうやり方もあるのだということを示すために（勉強のために）そうしたコードになっているのかが分かりません。
あとpadding-top: 50%;とは何に対しての50％なのでしょうか？画僧のサイズは2732×1280です。
その画像サイズの50％なのでしょうか？
それとも縦÷横×100で出てくる％なのでしょうか？
つたない質問の仕方で分からないかもしれないのですが、教えていただけますでしょうか。
よろしくお願いします。

エラーメッセージ

該当のソースコード

パターン①

html

CSS

.keyvisual-one {
background-image: url(../img/bg-keyvisual-one@2x.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 0;
padding-top: 50%;
}
@media screen and (min-width: 768px) {
.keyvisual-one {
height: 640px;
padding-top: 0;
}
}

パターン②

html

css

.keyvisual-two {
background-image: url(../img/bg-keyvisual-two@2x.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 170px;
}
@media screen and (min-width: 768px) {
.keyvisual-two {
height: 300px;
}
}

試したこと

検証ツールにて確認しましたが、画像の表示部位が少し変わったようでしたが大きな違いはありませんでした。

回答1件

ベストアンサー

height 値で px 指定した場合
- ウィンドウ幅によらず、固定の px 値の高さが確保されます。
padding-top のパーセンテージ指定した場合
- 包含ブロック（親ボックス）の横幅に対するパーセンテージ値で高さが確保されます。
- ウィンドウ幅を変えた際に、動的に高さを変えることが可能です。
- https://developer.mozilla.org/ja/docs/Web/CSS/padding#%E5%85%AC%E5%BC%8F%E5%AE%9A%E7%BE%A9
aspect-ratio プロパティで指定した場合
- 現在では、padding-top によるパーセンテージ指定を行わなくとも、ボックスのサイズをアスペクト比で指定することが可能です。
- ウィンドウ幅を変えた際に、動的に高さを変えることが可能です。
- https://developer.mozilla.org/ja/docs/Web/CSS/aspect-ratio

投稿2023/03/20 04:03

arcxor

総合スコア2457

回答へのコメント

asada88

2023/03/20 05:14

回答してくださりありがとうございます。なるほど、動的に変化をするに大変納得しました。 px指定の場合は動的ではなくmin-width768pxより大きくなった場合、動的ではなく急にサイズ変更があるということですよね？ padding-topのパーセンテージは親ボックスの横幅に対するパーセンテージ・・。ということは横幅1000pxだった場合、padding-top：50%;は横幅500pxで間違いないでしょうか？