I've set up a Wordpress theme that utilizes featured images as header images on pages to allow clients to easily make modifications themselves. The header image container needs to be a fixed size (100% width of the page and 300px height), so I'm using the "object-fit:cover" CSS property, which works perfectly. This creates an effect where the image spans the full width of the page and is automatically cropped vertically, eliminating the need for manual resizing or cropping by the client.
Everything works well except for Internet Explorer (shocker). Despite trying various workarounds like the "backgroundsize.htc" fix, JavaScript solutions, absolute positioning, and utilizing the clip CSS feature, IE still insists on stretching the image instead of cropping it. I'm starting to doubt if achieving this desired effect in IE is even possible at this point.
Below is the CSS code for the featured image:
.wp-post-image {
width:100%;
height:300px;
position:relative;
display:block;
top:0px;
object-fit:cover;
}
img.wp-post-image {
max-height:300px;
margin:0 auto;
}
This code functions properly in all browsers except IE. Therefore, I'm using the following code to provide IE overrides for the featured images:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.wp-post-image {}
img.wp-post-image {}
}
If anyone has any advice on how to compel IE to fill the featured image container with the corresponding image and crop it instead of stretching it, I would greatly appreciate your help...