I am encountering an issue with displaying an image in IE11. The image appears correctly in all other browsers, but in IE11, the bottom and right side of the image are cut off. Here is the SCSS code for the image:
&__container {
text-align: center;
}
&__logo {
img {
background: transparent;
height: 13.5em;
}
}
To address this problem in IE11, I have added custom CSS specifically for this browser:
&__logo {
img {
background: transparent;
height: 13.5em;
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
width: 30%;
height: 30%;
}
}
While this solution displays the entire image in IE11, it still renders larger than expected compared to other browsers and introduces some padding below it. Additionally, it disrupts the text-align:center property, causing the alignment to shift slightly towards the left.
I have experimented with adjusting the height and width properties independently, but without success. Any guidance or suggestions on how to resolve this issue would be greatly appreciated!