bootstrap5 modalでの画面外への画像のはみだし

Question

お世話になります。

bootstrap5を使用して、HPを作成しています。
modalで画像を表示させたいのですが、こちらがうまくいかないので質問させていただきます。

1.サムネイル画像をクリック
2.modalウィンドウで大きな画像を表示
という動作で、2で大きな画像を表示させると、スマホなど小さな画面では画像がはみ出てしまいます。
できれば、画面サイズに合わせてはみ出る部分が無くなるようにしたいと思います。

img-responsiveでは解決できませんでした。

JQueryは使用していません。

よろしくお願いします。

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                          <div class="modal-dialog modal-lg modal-dialog-centered"><!--sm=300 none=500 lg=800 xl=1140px-->
                          <div class="modal-content  bg-dark">

                            <div class="modal-body">
                              <div class="container">
                              <img src="1.png" class="img-responsive rounded mx-auto d-block">
                            </div>
                            </div>
                            <div class="modal-footer">
                            フッター文章
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                            </div>
                          </div>
                          </div>
                          </div>

状態の画像を追記いたします。使用画像は600px × 600pxです。
クリック前

クリック後

このように画面解像度＜画像サイズの時に画面からはみ出してしまいます。
（モーダルウィンドウからのはみだしは今回無視してください）

Comments

[m.ts10806]

どうなってるんでしょう
画面キャプチャ提示してください。

[konisi-kei]

こちらに気が付かず失礼いたしました。
そして申し訳ないことに自己解決してしまったので、併せて追記いたします。

Answer 1

方法としては
・img srcsetで画像の大きさを画面解像度ごとに指定する（横幅で指定）
とすることで、
画像を画面解像度に合わせて変えることができて、かつモーダルウィンドウの中央に表示ができました。
個人的な失敗としては
・img srcsetは複数画像が必要と思い込んでいた
・img srcsetのsizesはbootstrapのブレークポイントに合わせないと動かないことに気が付かなかった
点です。ブレークポイントについてはあまり検証していないので、もしかしたら動くかもしれません。

以下変更後のソースと解決後の画像です。

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                          <div class="modal-dialog modal-lg modal-dialog-centered"><!--sm=300 none=500 lg=800 xl=1140px-->
                          <div class="modal-content  bg-dark">

                            <div class="modal-body">
                              <div class="container">
                                <div class="row">
                              <img srcset="d-1.png 600w" class="rounded mx-auto d-block" sizes="(max-width: 576px) 300px, (max-width: 768px) 400px, (max-width: 991px) 480px, 600px">
                               </div>
                             </div>
                            </div>
                            <div class="modal-footer">
                            <small class="text-muted"></small>
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                            </div>
                          </div>
                          </div>
                          </div>

クリック後の画像

お騒がせいたしました。