bootstrap には
ratio-16x9というクラスが定義されているのでしょうか?
↓
はい、Bootstrap には
`ratio-16x9` というクラスが定義されています。
`ratio-16x9` は、
Bootstrap の比率ユーティリティ(Ratio Utility)の一部であり、
要素のアスペクト比(縦横比)を設定するために使用されます。
このクラスを使うと、要素を16:9のアスペクト比で表示することができます。
### 使用例
以下は `ratio-16x9` を使用して
レスポンシブな動画を埋め込む例です。
```html
<div class="ratio ratio-16x9">
<iframe
src="https://www.youtube.com/embed/example"
title="YouTube video" allowfullscreen></iframe>
</div>
```
### 補足
Bootstrap の比率ユーティリティには
他にも以下のようなクラスが用意されています:
- `ratio-1x1` (1:1)
- `ratio-4x3` (4:3)
- `ratio-16x9` (16:9)
- `ratio-21x9` (21:9)
これらのクラスは、Bootstrap 5 以降で利用可能です。
アスペクト比を設定すると、
要素の高さは幅に基づいて自動調整され、
レスポンシブなデザインを簡単に実現できます。
公式ドキュメントについては
[こちら](https://getbootstrap.com/docs/5.x/helpers/ratio/)
を参照してください。
コメント
コメントを投稿