Issues with IE stretching featured images in Wordpress theme - css

Question

I have setup a wordpress theme that uses featured images for header images on pages (I did this to make it easy for clients to modify on their own). Because the header image container needs to be a fixed size (100% width of the page and 300px heigh), I am using the "object-fit:cover" css callout which works perfect. The resulting effect is the image spans the full width of the page, and then is cropped vertically automatically (I did this so client would not need to manually size/crop the images before uploading them).
It works perfect with the exception of IE (of course). I have tried numerous possible workarounds from the "backgroundsize.htc" fix to javascripts, to absolute positioning and using the clip css feature, but it still does not give me the desired effect. IE insists on stretching the image. At this stage I am not sure if this is even doable in IE.
Here is my css 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 works in all browsers except IE, so I am using this code to feed IE overrides for the featured images:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.wp-post-image {}
img.wp-post-image {}
}
Does anyone have advice for me as to how to force IE to "fill" the featured image container with its respective image and crop it instead of stretching it? Any help is really appreciated...

Answer 1

Put the image in a containing div with strategic use of overflow: hidden
.wrapper {
height: 100px;
overflow: hidden;
}
<div class="wrapper">
<img src="http://sd.keepcalm-o-matic.co.uk/i-w600/keep-calm-and-wrap-it-up-3.jpg" width=600 height=700>
</div>

Answer 2

Okay... figured it out. I hope this solution can help someone else in the future and a big THANK YOU to Anthony for his suggestion of the wrapper... something that I thought I had to avoid...
If you are wanting to implement a featured image in your Wordpress theme that automatically crops the media file a person uploads and not have IE screw it all up, do this:
For your regular featured image - add this implementation to your wordpress theme (I usually add it in the header.php file):
<div class="wrapper">
<?php
// check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
</div>
Then add this in your css:
.wp-post-image {
width:100%;
height:300px;
position:relative;
display:block;
top:0px;
object-fit:cover;
}
.wrapper {
height:300px;
overflow:hidden !important;
}
This will work with all browsers except IE (naturally). IE (even version 11) will skew the image within the featured image div. To fix that, add this code to the bottom of your css:
/*IE HACK*/
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
img.wp-post-image {
max-width: 100%;
height:auto;
width:auto;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
}
Adding the "max-width" and the "auto" for the regular height and width callouts, is what I was missing before.
Thanks to Anthony's suggestion to use a wrapper for the featured image, I was able to fill the wrapper with the image and force IE to not skew it. To make the image center (vertically and horizontally) in IE, I added the "top,left,transform" code which centres the large image within the wrapper in IE 11...

Answer 3

For anyone else using the twenty seventeen theme template, just chuck this into the "Additional CSS" section which is accessed by clicking "Customise" from your admin bar at the top of the screen. After a long time googling with limited coding knowledge, this has worked for me so figured I would share :) Special thanks to this thread for getting me in the right direction!
.single-featured-image-header img {
width:100%;
height:100%;
position:relative;
display:block;
top:0px;
object-fit:cover;
}
.single-featured-image-header {
height:25em;
overflow:hidden !important;
}
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.single-featured-image-header img {
max-width: 100%;
height:auto;
width:100%;
}}