Q&A
お世話になります。表題にあります、画像を指定のエリアに収める方法が分からず質問いたします。
添付の画像は以下ソースにアクセスしたものです。（bootstrap4を利用）
左側に画像を表示させるイメージで、画像の縦横比は必ずしも一定ではなりません。
画面右側にあるテキスト一覧の高さを最大とし、赤線内に収まるよう色々と試行錯誤していますが、縦長の画像のの場合、添付のよう、はみ出ててしまいます。（テスト時に範囲が分かるように背景色をあえて表示）
以下が、そのソースですが、赤線内に収まるようにするにはどうしたら良いのでしょうか？
ご教示いただけたら幸いです。
よろしくお願いいたします。
<!doctype html> <html lang="ja"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title></title> <style> <!-- .text-blue{ color:#113BC3; } .border-blue{ border-bottom: 3px solid #113BC3; } --> .f-title{ font-size: 2.2vw; } .f-lot{ font-size: 6vw; } .f-price{ font-size: 7vw; } .f-list{ font-size: 3.4vw; } --> </style> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous"> </head> <body class="bg-white"> <div class="wrapper"> <div class="container-fluid my-4"> <div class="vh-100"><!--モニターの高さを測るため--> <div class="h-25"> <div class="row"> <div class="col-12 px-5 text-left"> <div class="font-weight-bold f-title">ITEMROOM</div> </div> <div class="col-6 pl-5 text-left pt-4"> <div class="font-weight-bold f-lot">ITEM 032</div> </div> <div class="col-6 pr-5 text-right"> <div class="font-weight-bold f-price text-blue">¥123,456,789</div> </div> </div><!--/ row--> </div> <div class="h-75"> <div class="row"> <div class="col-6 px-5 pt-3"> <div class="bg-info h-100 text-center"> <!--画像--> <img src="/images/sample.png" class="h-100"/> </div> </div> <div class="col-6 px-5"> <div class="row f-list"> <div class="col-3 border-blue text-blue" style="height:15%;">USD</div><div class="col-9 text-right border-blue">112,201</div> <div class="col-3 border-blue text-blue" style="height:15%;">EUR</div><div class="col-9 text-right border-blue">100,150</div> <div class="col-3 border-blue text-blue" style="height:14%;">GBP</div><div class="col-9 text-right border-blue">90,388</div> <div class="col-3 border-blue text-blue" style="height:14%;">RMB</div><div class="col-9 text-right border-blue">794,176</div> <div class="col-3 border-blue text-blue" style="height:14%;">HKD</div><div class="col-9 text-right border-blue">889,565</div> <div class="col-3 border-blue text-blue" style="height:14%;">TWD</div><div class="col-9 text-right border-blue">3,324,099</div> <div class="col-3 border-blue text-blue" style="height:14%;">KRW</div><div class="col-9 text-right border-blue">1,360,544</div> </div> </div> </div> </div> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
回答1件
0
ベストアンサー
絶対配置をして、画像サイドの高さを失わせるのはいかがでしょうか。
html
1<div class="bg-info h-100 text-center position-relative overflow-hidden"> 2 <!--画像--> 3 <img src="http://placehold.jp/150x150.png?text=sample.png" 4 class="h-100 d-block position-absolute w-100" style="object-fit: contain;" />
投稿2021/07/14 08:22
総合スコア36158
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/07/14 09:56