I created a design with two images next to each other using Flexbox (css). In Edge and Firefox it looks good. The images are displayed nicely. When resizing the screen, the images scale well, both horizontally and vertically.
However in IE11 it does not scale well. The width scales as it should, but the height remains the same.
I have tried all kinds of things, but have no idea how to solve this problem.
Does anyone have a tip?
<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:
It's a little strange. If I add an a href Attribute around the image tag it goes fine, the image scaled as it should.
<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>