Object-fit fix for Internet Explorer

HTML & CSS
1

Hi
I’ve been working on my front-end dev skill and started to use CSS3.

I put my changes live and annoyingly found that object-fit:cover isn’t supported in Internet Explorer or Edge.

Is there any fixes available or do I just need to put up with it until Microsoft decide to support it?

Thanks,
Owain.

2

Hi there OwainGDWilliams,

we really need to see the relevant code. :sunglasses:

coothead

1 Like
3

Aye. That would have been a good idea! Sorry

Code

<div class="col4">
    <div class="image">
        <a href="/blogs/owain-williams/archive/edinburgh-a-wonderful-city/">    
            <img src="/media/1136/portobello.jpg" alt="Portobello beach run" class="img-thumbnail centerImage" width="150px"><a/>
    </div>
</div>

CSS

.media-object, .img-thumbnail {
    object-fit: cover;
    object-position: center;
    height: 150px;
    width: 260px;
}

Live site is on www.runningbeside.me if it helps to see the issue in IE.

Thanks.

4

I find this a very useful resource for seeing what is supported where.

If you look in the “Resources” tab you will find links to “Polyfills”.
It also tells you which browsers need prefixes.

2 Likes
5

Hi there OwainGDWilliams,

here is an alternative solution, which will also work in IE…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<base href="http://www.runningbeside.me/">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
    background: #f2eee7;
 }
a {
    position: relative;
    display: block;
    height: 8.75em;
    width: 15.625em;
    padding: 0.25em;
    border: 0.06em solid #ddd;
    background: #fff;
    transition: width 0.5s ease-in-out;
 }
a span {
    position: absolute;
    height: 8.75em;
    width: 15.625em;
    top: 0.25em;
    left: 0.25em;
    background-image: url(media/1136/portobello.jpg);
    background-size: 100% auto;
    background-position: center center;
    transition: width 0.5s ease-in-out;
 }
@media screen and (max-width:64.5em){
a, a span {
    width: 8.75em;
  }
 }
</style>
</head>
<body> 
 <a href="/blogs/owain-williams/archive/edinburgh-a-wonderful-city/">
  Edinburgh
  <span></span>
 </a>
</body>
</html>

coothead

2 Likes
6

Thanks @coothead

I’ll look in to this, the only problem I might have is the url for the background-image is dynamic as it’s part of a list of blogs.

7

In that case you may have to put the background in as an in-line style :scream: something I would usually avoid like the plague :mask: but it may be an necessary evil in such a case.
Otherwise you would need to add individual classes/IDs to each one (assuming there are a number of different images) then echo out backgrounds for each class in css in the head.

8

Hi there OwainGDWilliams,

unfortunately, I did not fully test my code. :scream:

It appears that it will only work perfectly
for images whose height is greater than,
or equal to their width.

All is not lost, though. :sunglasses:

For others, like…

…we can just give them a different
background-size for the square box. :ok_hand:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<base href="http://www.runningbeside.me/">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
    background: #f2eee7;
 }
a {
    position: relative;
    display: block;
    line-height: 8.75em;
    width: 15.625em;
    padding: 0.25em;
    border: 0.06em solid #ddd;
    background: #fff;
    transition: width 0.5s ease-in-out;
 }
a span {
    position: absolute;
    height: 8.75em;
    width: 15.625em;
    top: 0.25em;
    left: 0.25em;
    background-size: 100% auto;
    background-position: center center; 
    background-repeat:no-repeat;
    transition: width 0.5s ease-in-out;
 }
#span0 {background-image: url(media/1136/portobello.jpg);}
#span1 {background-image: url(media/1135/carnethyselfie.jpg);}
#span2 {background-image: url(media/1081/blog-icon.png);}
#span3 {background-image: url(media/1130/trackrunning.jpg);}
#span4 {background-image: url(media/1128/edinburgh-parkrun-mobile.jpg);}
#span5 {background-image: url(media/1127/youtube.png);}

@media screen and (max-width:64.5em){
a, a span {
    width: 8.75em;
  }
#span5 {
    background-size: 156.25%;
  }
 }
</style>
</head>
<body> 
 <a href="/blogs/owain-williams/archive/edinburgh-a-wonderful-city/">
  Edinburgh
  <span id="span0"></span>
 </a>
 <a href="/blogs/owain-williams/archive/streets-and-hills/">
  streets
  <span id="span1"></span>
 </a>
 <a href="/blogs/owain-williams/archive/time-to-recharge/">
  recharge
  <span id="span2"></span>
 </a>
 <a href="/blogs/owain-williams/archive/not-just-the-body/">
  body
  <span id="span3"></span>
 </a>
 <a href="/blogs/mandy-williams/archive/parkrunning-with-no-gps/">
  No gps
  <span id="span4"></span>
 </a>
 <a href="/blogs/owain-williams/archive/enjoying-my-running/">
  Enjoying
  <span id="span5"></span>
 </a>
</body>
</html>

“Necessity is the mother of invention”

coothead

2 Likes
9

so this will completely replace the object-fit options or do they work together?

Sorry, just getting a bit confused with all the options :slight_smile:

I also think I’ll need to do some inline style due to the dynamic images, each blog post has it’s own image so hard coding the background image wont work.

I was thinking something like

<a href="/blogs/owain-williams/archive/edinburgh-a-wonderful-city/">
  Edinburgh
  <span id="span" style="background-image:url(<<DYNAMIC_IMAGE_URL>>)"></span>
 </a>
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.