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件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/03/20 05:14
2023/03/20 07:10
2023/03/20 13:31