画像やブロック要素などの縦横比を固定して、レスポンシブに拡大縮小させたいです。どうすればいいでしょう？CSSの気持ちを理解したいです。
CSSの気持ち
「height:」を「padding ..%」で指定した時
要素の高さは幅（width:）から基準値を取得して計算する。
したがって
→画面幅「width:」が変化すると、高さ値「height:」も等比で変化
→padding-topの値で比率固定が可能
次期cssは？height: auto; でレスポンシブにしてほしいですね。今のところは、以下の方法を使います。
計算式： 高さ÷幅×100＝比率
| 縦横比：16:9 | 9 ÷ 16 × 100 | =56.25 | padding-top: 56.25%; (Youtube) |
| 縦横比： 5:3 | 3 ÷ 5 × 100 | =60 | padding-top: 60%; |
| 縦横比： 4:3 | 3 ÷ 4 × 100 | =75 | padding-top: 75%; |
| 縦横比： 6:5 | 5 ÷ 6 × 100 | =83.33 | padding-top: 83.33%; |
| 縦横比： 4:5 | 5 ÷ 4 × 100 | =125 | padding-top: 125%; |
| 縦横比： 3:4 | 4 ÷ 3 × 100 | =133.33 | padding-top: 133.33%; |
divなどの要素を縦横比固定でレスポンシブ
--html
<div class="as-outer">
<div class="as-inner">ブロック要素コンテンツ</div>
</div>
--css
.as-outer {
position: relative; ※
width: 100%;
}
.as-outer:before {
content:"";
display: block;
padding-top: 60%; /* 縦横比 5:3 */
}
.as-inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}※content プロパティー
要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用される空の箱
iframeの要素を縦横比固定でレスポンシブ
--html
<div class="as-outer">
<iframe src="https://www.youtube.com/embed/任意の動画" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
--css
.as-outer {
position: relative;
width: 100%;
}
.as-outer:before {
content:"";
display: block;
padding-top: 56.25%; /* Youtube 縦横比：16:9 */
}
.as-outer iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Youtube 縦横比：16:9
Googleカレンダー問題
上記の方法でGoogleカレンダーを設置すると、iPhoneのsafariで、縦方向に長くなっていくのを確認できます。特に、横画面を縦にしたりすると、まるで手品のように伸びていきます。relative – absolute で自動演算されて？iosが妙なループに入るのでしょうか？？いつか見られなくなるとも思うので？試すなら今だけかもしれません？？(2020/02/10)
img要素を縦横比固定でレスポンシブ
画像の場合は単純な指定で追従してくれます。
サイト全体のimg
–html
<img src=”URL” />
–css
img {
width: 100%;
height: auto;
}クラス指定
–html
<img src=”URL” class=”as-img” />
–css
img.as-img {
width: 100%;
height: auto;
}
コメント