Flexbox image match container height - html

Question

I have 4 images on my site and display 2 vertically with 2 horizontal images next to these in a grid.
The problem I'm having is that the images line up correctly when the page is desktop size but when it is scaled down to mobile the images will scale differently and look out of alignment
As you can see the vertical images on the left don't scale to fit the container height, is there a way to stretch these images to match the container height?
How can I get the images to stay aligned at all times?
* {
box-sizing: border-box;
}
.home-promo-wrap {
display: flex;
flex-wrap: wrap;
}
.home-promo-cell {
display: flex;
flex: 0 0 50%;
}
.gridA {
display:flex;
flex-wrap: wrap;
flex: 1 1 auto;
}
.gridB {
display:flex;
flex-wrap: wrap;
}
.cell {
display: flex;
flex: 0 0 50%;
padding: 10px;
}
.gridB .cell:nth-child(1) {
flex: 0 0 100%;
}
.gridB .cell:nth-child(2) {
flex: 0 0 100%;
}
.text-vertical {
position: absolute;
top: 0;
left: 0;
right: 0;
color: #000;
z-index: 1;
text-align: center;
background: rgba( 255,255,255,0.6);
padding: 20px;
}
.inner-cell-vertical:hover .text-vertical {
background: rgba(255,255,255,0);
transition: background 0.8s ease;
}
.inner-cell-vertical {
position: relative;
overflow: hidden;
background: #ff00ff;
}
.inner-cell-vertical img {
width: 100%;
height: auto;
display: block;
overflow:hidden;
}
.inner-cell-vertical::after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(255,255,255,.6);
animation-name: fadeFromtop;
-webkit-animation-name: fadeFromtop;
animation-duration: 300ms;
-webkit-animation-duration: 300ms;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
overflow: hidden;
}
.inner-cell-vertical:hover .text {
bottom: 50%;
transform: translateY(50%);
-webkit-transform: translateY(50%);
-moz-transform: translateY(50%);
-o-transform: translateY(50%);
}
.text {
position: absolute;
top:0;
left:0;
padding-left: 35px;
padding-bottom: 17px;
transition: all 0.5s ease;
height: 100%;
}
a {
display: flex;
}
a:hover .inner-cell-vertical:after {
animation-name: fadeFromBottom;
-webkit-animation-name: fadeFromBottom;
animation-duration: 300ms;
-webkit-animation-duration: 300ms;
animation-timing-function: ease-in;
-webkit-animation-timing-function: ease-in;
animation-fill-mode: forwards;
opacity:1;
overflow: hidden;
}
#keyframes fadeFromBottom {
0%{
opacity:0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
display: block;
}
}
#keyframes fadeFromtop {
0%{
opacity:1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
100%{
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(400%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
}
<div class="home-promo-wrap">
<div class="home-promo-cell">
<div class="gridA">
<div class="cell">
<a>
<div class="inner-cell-vertical">
<div class="text-vertical">
<h2>
</h2>
<p class="text-desc">
</p>
</div><img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_1.jpg" alt="" /></div>
</a>
</div>
<div class="cell">
<a>
<div class="inner-cell-vertical">
<div class="text-vertical">
<h2>
</h2>
<p class="text-desc">
</p>
</div>
<img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_1.jpg" alt="" />
</div>
</a>
</div>
</div>
</div>
<div class="home-promo-cell">
<div class="gridB">
<div class="cell">
<a>
<div class="inner-cell-vertical">
<div class="text-vertical">
<h2>
</h2>
<p class="text-desc">
</p>
</div>
<img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_3.jpg" alt="" />
</div>
</a>
</div>
<div class="cell">
<a>
<div class="inner-cell-vertical">
<div class="text-vertical">
<h2>
</h2>
<p class="text-desc">
</p>
</div>
<img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_4.jpg" alt="" />
</div>
</a>
</div>
</div>
</div>
</div>

Answer 1

If to keep the img you could use object-fit.
Note, object-fit has limits when it comes to browser support: https://caniuse.com/#feat=object-fit
If you need better browser support, here is a sample using background-image: jsfiddle demo.
The main with this version is to set a height and nested flex containers.
Stack snippet
* {
box-sizing: border-box;
}
.home-promo-wrap {
display: flex;
flex-wrap: wrap;
}
.home-promo-cell {
display: flex;
flex: 0 0 50%;
}
.gridA {
display:flex;
flex-wrap: wrap;
flex: 1 1 auto;
}
.gridB {
display:flex;
flex-wrap: wrap;
}
.cell {
display: flex;
flex: 0 0 50%;
padding: 10px;
}
.gridB .cell:nth-child(1) {
flex: 0 0 100%;
}
.gridB .cell:nth-child(2) {
flex: 0 0 100%;
}
.text-vertical {
position: absolute;
top: 0;
left: 0;
right: 0;
color: #000;
z-index: 1;
text-align: center;
background: rgba( 255,255,255,0.6);
padding: 20px;
}
.inner-cell-vertical:hover .text-vertical {
background: rgba(255,255,255,0);
transition: background 0.8s ease;
}
.inner-cell-vertical {
position: relative;
overflow: hidden;
background: #ff00ff;
}
.inner-cell-vertical img {
width: 100%;
height: 100%; /* changed */
display: block;
overflow:hidden;
object-fit: cover; /* added */
}
.inner-cell-vertical::after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(255,255,255,.6);
animation-name: fadeFromtop;
-webkit-animation-name: fadeFromtop;
animation-duration: 300ms;
-webkit-animation-duration: 300ms;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
overflow: hidden;
}
.inner-cell-vertical:hover .text {
bottom: 50%;
transform: translateY(50%);
-webkit-transform: translateY(50%);
-moz-transform: translateY(50%);
-o-transform: translateY(50%);
}
.text {
position: absolute;
top:0;
left:0;
padding-left: 35px;
padding-bottom: 17px;
transition: all 0.5s ease;
height: 100%;
}
a {
display: flex;
}
a:hover .inner-cell-vertical:after {
animation-name: fadeFromBottom;
-webkit-animation-name: fadeFromBottom;
animation-duration: 300ms;
-webkit-animation-duration: 300ms;
animation-timing-function: ease-in;
-webkit-animation-timing-function: ease-in;
animation-fill-mode: forwards;
opacity:1;
overflow: hidden;
}
#keyframes fadeFromBottom {
0%{
opacity:0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
display: block;
}
}
#keyframes fadeFromtop {
0%{
opacity:1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
100%{
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(400%);
-o-transform: translateY(100%);
transform: translateY(100%);
}
}
<div class="home-promo-wrap">
<div class="home-promo-cell">
<div class="gridA">
<div class="cell">
<a>
<div class="inner-cell-vertical">
<div class="text-vertical">
<h2>
</h2>
<p class="text-desc">
</p>
</div><img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_1.jpg" alt="" /></div>
</a>
</div>
<div class="cell">
<a>
<div class="inner-cell-vertical">
<div class="text-vertical">
<h2>
</h2>
<p class="text-desc">
</p>
</div>
<img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_1.jpg" alt="" />
</div>
</a>
</div>
</div>
</div>
<div class="home-promo-cell">
<div class="gridB">
<div class="cell">
<a>
<div class="inner-cell-vertical">
<div class="text-vertical">
<h2>
</h2>
<p class="text-desc">
</p>
</div>
<img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_3.jpg" alt="" />
</div>
</a>
</div>
<div class="cell">
<a>
<div class="inner-cell-vertical">
<div class="text-vertical">
<h2>
</h2>
<p class="text-desc">
</p>
</div>
<img class="img-responsive" src="https://plissee-jalousien-rollos.de/media/wysiwyg/categories_1_4.jpg" alt="" />
</div>
</a>
</div>
</div>
</div>
</div>

Answer 2

I believe its a one line change at line number 64 in the css.
height: auto; to height: 100%;
.inner-cell-vertical img {
width: 100%;
height: 100%;
display: block;
overflow:hidden;
}
Here is the Pen. Please let me know whether this helps.