Q&A
実現したいこと
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で出てくる％なのでしょうか？
つたない質問の仕方で分からないかもしれないのですが、教えていただけますでしょうか。
よろしくお願いします。
エラーメッセージ
該当のソースコード
パターン①
<div class="keyvisual-one"></div>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;
}
}
パターン②
<div class="keyvisual-two"></div>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件
0
ベストアンサー
- 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
総合スコア2857
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/03/20 05:14
2023/03/20 07:10
2023/03/20 13:31