bootstrap に ratio-16x9というクラスが定義されているのか?

 



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/) 

を参照してください。


コメント