ブートストラップ5でイメージをレスポンシブに

Question

前提・実現したいこと

ブートストラップ5を使用。
イメージをレスポンシブにしたいです。

発生している問題・イメージがレスポンシブになりません。エラーメッセージ

イメージがレスポンシブになりません。
一定の幅までいくとそれ以上の拡大が止まります。
550pxの画像であれば、550pxまでは伸縮しますが、551pxにはならない。といった感じです。
そもそもブートストラップで背景画像をコンテナの外まで目いっぱい伸ばしたく、
コンテナのそとに、divを作って、背景を指定しています。
これに関しても、もっと良いやり方があるといいのですが…

該当のソースコード

<div class="TT"><!-- containerの外にめいっぱい背景を敷くためのクラス --> <div class="container"><!-- container --> <div class="row"> <div class="col-12"> 　　<h3>題名題名題名</3> 　　<p>テキストテテキストテキストテキストテキストテキストキストテキスト</p> 　　<img class="img-fluid" src="img/01.jpg" alt=""> 　　</div> 　　</div> 　</div><!-- container --> </div>

Answer 1

ドキュメントを参照してください。

Responsive Images

This applies max-width: 100%; and height: auto; to the image so that it scales with the parent element.

つまり、親要素に依存するということ。
このように機能にどのような制約やルールがあるかという点もドキュメントにしっかり記載されています。

Comments

[natumema]

ご回答ありがとうございます。
上記の場合だと、"col-12"が親要素ですよね？
"col-12"なら、コンテナいっぱい広がると思ったんです…
難しいです…

[m.ts10806]

しかしながら.img-fluidはmax-width: 100%なので、
本来の画像サイズ以上にはなりません。
先の回答にあるように、本来の画像サイズ以上になって荒くなることを防ぐためと思われます。

Answer 2

<div class="col-12"> を削除したら、レスポンシブ化しました。

Answer 3

550pxの画像であれば、550pxまでは伸縮しますが、551pxにはならない。といった感じです。

拡大表示しますと画像が荒くなりますので大き目の画像をご用意された方がよろしいかと存じます。

Comments

[natumema]

おっしゃる通りです。
ちなみにcolをとると、伸び始めましたが、画像は大きいものを用意したいと思います。
ブートストラップは謎がいっぱいです。
ありがとうございました。