CSS - aspect-ratio
概要
属性名 | aspect-ratio |
---|---|
値 | auto | <ratio> |
初期値 | auto |
適用可能要素 | テキスト |
継承 | 継承する |
サポート | https://caniuse.com/?search=aspect-ratio |
説明
矩形の縦横比を指定します。
値 | 説明 |
---|---|
auto | 縦横比を自動計算します。 |
<ratio> | 縦横比を 2 / 1 のように指定します。この場合 横幅:縦幅 が 2:1 になります。/ 1 は省略可能で省略時は / 1 と見なされます。 |
使用例
CSS
.sample {
background-color: #ccc;
width: 10rem;
aspect-ratio: 2 / 1; /* aspect-ratio: 2; と同義 */
}
HTML
<div class="sample"></div>
表示
リンク
- https://developer.mozilla.org/ja/docs/Web/CSS/aspect-ratio
- https://w3c.github.io/csswg-drafts/css-sizing-4/#aspect-ratio
Copyright (C) 2022 杜甫々
初版:2022年9月25日、最終更新:2022年9月25日
https://www.tohoho-web.com/css/prop/aspect-ratio.htm