Images max-width max-height not working in IE 11 - html

Question

I use fullPage.js and the following html and css for the image slider on my website.
It works in Safari and Chrome on Mac but not in IE 11 on Windows.
Has anybody an idea how to fix this?
Demo: www.aronsommer.com
<div class="slide"><img src="images/bitumenpainting1.jpg" alt="Bitumenpainting 1"></div>
.slide img {
width : auto;
height : auto;
max-width : 90%;
max-height : 90%;
margin : 0 auto;
padding : 0;
display : block;
}

Answer 1

Sorry. It's easier if you treat the CSS file. You need some CSS Hacks, it's something like the exemple bellow:
/* IE7 */
*:first-child+html #element { color: red }
/* IE7, FF, Safari, Opera */
html>body #elemento { color: red }
/* IE8, FF, Safari, Opera (Everything but IE 6,7) */
html>/**/ body #elemento { color: red }
/* Opera 9.27 and safari 2 */
html:first-child #element { color: red }
/* Safari 2-3 */
html[xmlns*=""] body:last-child #element { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #element { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #element { color: red }
/* saf3+, chrome1+ */
#media screen and (-webkit-min-device-pixel-ratio:0) {
#element { color: red }
}
/* iPhone / mobile webkit */
#media screen and (max-device-width: 480px) {
#element { color: red }
}
/* Safari 2 - 3.1 */
html[xmlns*=""]:root #element { color: red }
/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #element { color: red }
/* Tudo menos IE6-8 */
:root *> #element { color: red }
/* IE7 */
*+html #element { color: red }
/* Firefox 3.0+ */
#element, x:-moz-any-link, x:default { color: red }
You need to change all your CSS to program with the browser compatibility.
I hope this helps

Answer 2

Following media query has fixed my problem with IE 11.
Using viewport units vw and vh instead of percentage for max-width and max-height.
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
.slide img {
max-width : 90vw;
max-height : 90vh;
}
}

Answer 3

This seems to be a bug in IE11: Bug Report. Adding flex: 1 (as in the report)
.slide img {
flex: 1
max-width: 100%
max-height: 100%
}
Works for me. You may have to change your containers display mode to flexbox. Like so (example centers content):
.slide {
display: flex
align-items: center
justify-content: center
width: whateveryoulike
height: whateveryoulike
}
Very nasty bug!