画像を指定の位置に収めるための方法をご教示ください

お世話になります。表題にあります、画像を指定のエリアに収める方法が分からず質問いたします。

添付の画像は以下ソースにアクセスしたものです。（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">&yen;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件

ベストアンサー

絶対配置をして、画像サイドの高さを失わせるのはいかがでしょうか。

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

Lhankor_Mhy

総合スコア36960

chapp

2021/07/14 09:56

Lhankor_Mhyさんご親切なアドバイスをありがとうございます。 <div class="h-75"> と、高さを指定しているので、その後その高さ（値）は保たれると考えていましたが、それは保たれないようでしたので、都度h-100と明示することで、画像ファイルの高さにも反映するまで確認しました。色々なツールがあるのですね。ありがとうございました。

行動規範の内容に同意します