エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
aspect-ratioで矩形サイズの記述が便利(最近便利なCSSおれおれAdvent Calendar 2023 – 23日目) | Ginpen.com
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
aspect-ratioで矩形サイズの記述が便利(最近便利なCSSおれおれAdvent Calendar 2023 – 23日目) | Ginpen.com
最近便利なCSSおれおれAdvent Calendar 2023 – 23 日目 ほとんどの場面では width と height を指定すれ... 最近便利なCSSおれおれAdvent Calendar 2023 – 23 日目 ほとんどの場面では width と height を指定すれば良いんですが、それが面倒な場合や難しい場面もあります。aspect-ratio で縦横の比率を指定できるので便利です。 例 デモ:https://codepen.io/ginpei/pen/JjzjBmK 縦横の片方だけ指定するともう片方は自動で決まります。 取る値 <width> / <height> のような組か、0.5 のような数値 1 つです。 スラッシュは区切りであって割り算の意味ではないんだけど、1 / 2 と 0.5 は結果的に同じです。 大きさに幅がある場合 サイズが max-width 等で指定されていると、それに収まる範囲で縦横比が算出されます。 こんな風にすると必ず画面内に収まる大きさで、かつ縦横比が黄金比になります。