質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

428閲覧

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

asada88

総合スコア7

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2023/03/20 03:33

実現したいこと

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

<div class="keyvisual-one"></div>

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

<div class="keyvisual-two"></div>

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;
}
}

試したこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

  • height 値で px 指定した場合
    • ウィンドウ幅によらず、固定の px 値の高さが確保されます。
  • padding-top のパーセンテージ指定した場合
  • aspect-ratio プロパティで指定した場合
    • 現在では、padding-top によるパーセンテージ指定を行わなくとも、ボックスのサイズをアスペクト比で指定することが可能です。
    • ウィンドウ幅を変えた際に、動的に高さを変えることが可能です。
    • https://developer.mozilla.org/ja/docs/Web/CSS/aspect-ratio

投稿2023/03/20 04:03

arcxor

総合スコア2859

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

asada88

2023/03/20 05:14

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

2023/03/20 07:10

> ということは横幅1000pxだった場合、padding-top:50%;は横幅500pxで間違いないでしょうか? padding-top なので横幅ではなく縦幅 500px です。
asada88

2023/03/20 13:31

高さですね!そうですよね。 なんだかスッキリとしました。 ありがとうございました。 アスペクト比についてもありがとうございました。 頑張ってやってみます。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問