连续的img大小//// col-8 <-> col-4

Question

我绝对是新蜂，想创建2行。一个具有2 img col-4大小和col-8大小，另一行à3 x col-4大小。 我的问题是col-8 img比col-4 img更大（高）。 我该如何解决？我尝试了很多，但没有任何效果。 谢谢你的帮助。 [问题

.col-4 {
  padding-left: 5px;
  padding-right: 5px;
}

.col-8 {
  padding-left: 5px;
  padding-right: 5px;
}

.x1 {
  border: 1px solid black;
}

.x2 {
  border: 1px solid black;
}

.x1_pic {
  width: 100%;
  height: auto;
  position: relative;
}

.x2_pic {
  width: 100%;
  height: auto;
  position: relative;
}

.x1_header {
  position: absolute;
  margin-top: -95%;
  text-align: center;
}

.x2_header {
  position: absolute;
  margin-top: -95%;
  text-align: center;
}

<div class="container">
    <div class="row">
        <div class="col-4">
            <div class="x1">
                <img class="x1_pic" src="./img/header-background.jpg">
            </div>
        </div>
        <div class="col-8">
            <div class="x2">
                <img class="x2_pic" src="./img/maschine_2.jpg">
            </div>
        </div>
    </div>   
    <div class="row">
        <div class="col-4">
            <div class="x1">
                <img class="x1_pic" src="./img/header-background.jpg">
            </div>
        </div>
        <div class="col-4">
            <div class="x1">
                <img class="x1_pic" src="./img/header-background.jpg">
            </div>
        </div>
        <div class="col-4">
            <div class="x1">
                <img class="x1_pic" src="./img/header-background.jpg">
            </div>
        </div>
    </div>     
</div>  

] 1