Q&A
>Bootstrap？
じゃ困ります、きちんと確認してくださいますか。
またバージョンはおいくつでしょう。
sample01.pngのサイズは何pxですか？
初心者でいろいろ調べてもむずかしいことだらけなので質問させていただきます。
Bootstrap？のカラムの要素を使って写真を３枚並べて表示させたいのですが
写真のように重なってしまいます。
写真がもともと大きいのが原因だと思ったのでCSSで
<div class="container"> <div class="row"> で指定してwidthの設定で幅を変えようとしても変化ありません。CSSで設定しようとするのが間違いなのでしょうか？教えていただけたらありがたいです。よろしくお願いします。
HTMLのコード
<body> <div class="container"> <div class="row"> <div class="col-2 bg-primary"><img src="sample01.png"></div> <div class="col-8 bg-secondary"><img src="sample01.png"></div> <div class="col-2 bg-success"><img src="sample01.png"></div> </div> </div> </body>
CSSのコード
.container{ width: 150px; } .row{ width: 150px; }
ご指摘ありがとうございます。
Bootstrap5.0です。
sample01.pngは800×800でした。
回答1件
0
ベストアンサー
どのように並べたいのか今一つよくわからないですが、とりあえずimg-fluidをつけてみてはどうでしょうか。
画像をレスポンシブにするには .img-fluid を使用します。 max-width: 100%; , height: auto; を適用すると親要素に比例するレスポンシブが実現出来ます。
投稿2022/03/07 04:17
総合スコア34677
回答へのコメント
コメントをありがとうございます。
きれいに画像をレスポンシブできました。
あなたの回答
tips
プレビュー
