Responsive squared images with overlapping one in the middle - html

Question

I'm trying to create a specific layout in which:
Two images have to be one to the side of the other, filling all the width
Images height must adapt to create a squared image
In the middle of both images, an icon or text will be placed, as linking the images
The external container doesn't have a fixed height nor width
This is a representation of what I'm looking for:
Side to side images with one overlapping in the center
This is what I've managed to do, but it has the following problems:
Depending on the size of the images, the squares take a different size
The middle icon doesn't go to the middle...
.main_container_1 {
position: absolute;
width: 100%;
height: 600px;
background-color:lime;
margin: 10px;
padding: 10px;
}
.row {
width: 100%;
background-color: yellow;
display:flex
}
.image_cell {
width:50%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden
}
.image_cell img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%
}
.text-cell {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background:white;
}
.inner {
width: 50px;
height: 50px;
background-color:red;
}
<div class="main_container_1">
<div class="row">
<div class="image_cell">
<img src="http://placehold.it/450x200">
</div>
<div class="image_cell">
<img src="http://placehold.it/200x200">
</div>
<div class="text-cell">
<div class="inner">
text
</div>
</div>
</div>

Answer 1

You basically need to make your .row's height to be half its width (that would give you space for two squares). To do that you need to use the padding trick.
.row {
width: 100%;
padding-top: 50%;
background-color: yellow;
position: relative;
}
and then you'll need to position your images absolutely since you're faking their parent's height with padding.
.image_cell {
width: 50%;
height: 100%;
position: absolute;
top: 0;
}
.image_cell:nth-child(1) {
left: 0;
}
.image_cell:nth-child(2) {
right: 0;
}
and finally you can position your .text-cell in the center using transform like this (you must make sure to put position: relative to the parent container you want to position it relative to, which is .row in this case):
.text-cell {
position: absolute;
background: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Here's the final result:
.main_container_1 {
position: absolute;
width: 100%;
height: 600px;
background-color: lime;
margin: 10px;
padding: 10px;
}
.row {
width: 100%;
padding-top: 50%;
background-color: yellow;
position: relative;
}
.image_cell {
width: 50%;
height: 100%;
position: absolute;
top: 0;
}
.image_cell:nth-child(1) {
left: 0;
}
.image_cell:nth-child(2) {
right: 0;
}
.image_cell img {
width: 100%;
height: 100%
}
.text-cell {
position: absolute;
background: white;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.inner {
width: 50px;
height: 50px;
background-color: red;
}
<div class="main_container_1">
<div class="row">
<div class="image_cell">
<img src="http://placehold.it/450x200">
</div>
<div class="image_cell">
<img src="http://placehold.it/200x200">
</div>
<div class="text-cell">
<div class="inner">
text
</div>
</div>
</div>
One more thing: you probably want to look into using background images instead to maintain aspect ratio.

Answer 2

In order to solve this, I've added a .square class to maintain the aspect ratio. The other thing I did is use justify-content and align-items on the div surrounding the cells in order to center the text cell.
* {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
color: #fff;
padding: 10px;
background-color: #333;
display: inline-block;
}
.container .cells {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container .cells .image {
flex: 0 0 50%;
background: linear-gradient(
135deg,
rgb(252, 223, 138) 0%,
rgb(243, 131, 129) 100%
);
}
.container .cells .image img {
width: 100%;
height: 100%;
}
.container .cells .text {
position: absolute;
width: 60px;
line-height: 60px;
background-color: #5e2563;
text-align: center;
}
.container p {
margin-top: 10px;
}
.square {
position: relative;
}
.square:after {
content: "";
display: block;
padding-bottom: 100%;
}
.square .content {
position: absolute;
width: 100%;
height: 100%;
}
<div class="container">
<div class="cells">
<div class="image square">
<div class="content"></div>
</div>
<div class="image square">
<div class="content"></div>
</div>
<div class="text">
middle
</div>
</div>
<p>This is a variable width and height container</p>
</div>