After creating a design that showcases two images side by side using Flexbox (css), I noticed that it appears perfectly in Edge and Firefox. The images are displayed elegantly, and when the screen is resized, they scale effectively both horizontally and vertically.
However, upon testing in IE11, it became apparent that the scaling was not consistent. While the width adjusted properly, the height remained static.
I have experimented with various solutions but unfortunately, none have resolved this issue for me.
If anyone has any suggestions or tips on how to tackle this problem, I would greatly appreciate it!
<section>
<div class="flex">
<div class="col-topnieuws post-media">
<img src="images/cont/8663.jpg" alt="Description 1">
</div>
<div class="col-topnieuws post-media">
<img src="images/cont/8664.jpg" alt="Description 2">
</div>
</div>
</section>
CSS:
.flex {
display: flex;
flex-wrap: wrap;
}
.flex .col-topnieuws {
width: calc((100% / 2) - (50px / 2));
margin-right: 25px;
margin-bottom: 25px;
display: flex;
flex-direction: column;
flex: 1 1 200px;
}
.post-media {
position: relative;
overflow: auto;
}
img {
width: auto;
max-width: 100%;
height: auto;
margin: 0;
padding: 0;
border: none;
line-height: normal;
vertical-align: middle;
}
UPDATE:
Interestingly, adding an "a href" attribute around the image tag seemed to resolve the issue. With this modification, the images scaled correctly as desired.
<section>
<div class="flex">
<div class="col-topnieuws post-media">
<a href="#">
<img src="images/cont/8663.jpg" alt="Description 1">
</a>
</div>
<div class="col-topnieuws post-media">
<a href="#">
<img src="images/cont/8664.jpg" alt="Description 2">
</a>
</div>
</div>
</section>