左右の画像の立て幅を揃えたい

左右の画像の立て幅をそろえたいです。
画像をうまく切り抜いても画面幅を小さくすると左の2つの高さと右の画像の高さ合わないので
揃えたいです。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7
8    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
9</head>
10<body>
11    <div class="container-fluid p-0">
12        <div class="row no-gutters">
13            <div class="col-lg-4 col-sm-6">
14                <div class="container p-5" style="background-color:grey" >
15                    <h2 class="text-white">hogehogehogeho</h2>
16                    <p class="text-white room-description">
17                        hogehogehogehogehogehogehohogehogehoge
18                        hogehogehogehogehogehogehohogehogehoge
19                        hogehogehogehogehogehogehohogehogehoge
20                        hogehogehogehogehogehogehohogehogehoge
21                        hogehogehogehogehogehogehohogehogehoge
22                        hogehogehogehogehogehogehohogehogehoge
23                    </p>
24                    <div class="text-center mt-5">
25                        <a href="#" class="h2 btn-flat-border-1 text-secondary">ボタン ＞</a>
26                    </div>
27                </div>
28                <div>
29                    <img class="img-fluid" src="https://picsum.photos/id/237/600/400">
30                </div>
31            </div>
32            <div class="col-lg-8 col-sm-6">
33                    <img class="img-fluid" src="https://picsum.photos/id/237/1100/1000">    
34            </div>
35        </div>
36    </div>
37  </body>
38</html>

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

回答1件

ベストアンサー

img要素、Bootstrapでは難しそうです。

背景画像に表示させればどうでしょうか。

html
1<div class="container-fluid p-0">
2  <div class="row no-gutters">
3    <div class="col-lg-4 col-sm-6">
4      <div class="container p-5" style="background-color:grey" >
5        <h2 class="text-white">hogehogehogeho</h2>
6        <p class="text-white room-description">
7          hogehogehogehogehogehogehohogehogehoge
8          hogehogehogehogehogehogehohogehogehoge
9          hogehogehogehogehogehogehohogehogehoge
10          hogehogehogehogehogehogehohogehogehoge
11          hogehogehogehogehogehogehohogehogehoge
12          hogehogehogehogehogehogehohogehogehoge
13        </p>
14        <div class="text-center mt-5">
15          <a href="#" class="h2 btn-flat-border-1 text-secondary">ボタン ＞</a>
16        </div>
17      </div>
18      <div>
19        <img class="img-fluid" src="https://picsum.photos/id/237/600/400">
20      </div>
21    </div>
22    <div class="col-lg-8 col-sm-6" style="background: no-repeat center/cover url('https://picsum.photos/id/237/1100/1000');">
23    </div>
24  </div>
25</div>