Stretched Images in IE 11

Question

My WordPress website runs well on Chrome and Firefox but in Internet Explorer 11 it gives stretched look for some images like in this link in the first image after the map image.

I've tried to add this CSS code in my style.css of the theme but it doesn't work

img{
    max-width:100%;
    flex-shrink:0;
}

Chrome : IE :

Can you help me with that?

I try to test your site in IE 11 and image looks proper to me. This is my testing result. https://i.postimg.cc/GmT0pTpX/256.png If this is not same on your side, can you please try to post the snapshot of the issue may help us to get idea about the issue. Thanks for your understanding. — Deepak-MSFT, Aug 28 '19 at 10:57
Try to refer these links and example may help to solve your issue. https://codepen.io/studiotwist/pen/XdgqmZ and https://stackoverflow.com/questions/41226895/alternative-option-of-object-fitcontain-for-ie and https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3 — Deepak-MSFT, Aug 28 '19 at 14:10

Sumit Patel · Accepted Answer · 2019-08-28T11:23:57.647

0

This is because you have used the object-fit property which is not compatible with IE11.

Can I use

You have to use that image as background image.

2 if you want fix width then height need to be auto.

if you want height to be fixed then width need to be auto. this way your image want stretched in any design.

I would suggest you use as background image check the snippet.

.img {
  display: inline-block;
  background: url(https://dummyimage.com/600x400/000/fff) center center;
  width: 300px;
  height: 400px;
}

.text {
  display: inline-block;
  vertical-align: top;
  padding-left: 20px;
  width: calc(100% - 330px);
}

p:last-of-type {
  margin-bottom: 0px;
}

<div id="here">
  <span class="img"></span>
  <div class="text">
    <h2>Example</h2>
    <p>Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example</p>
    <p>Example Example</p>
    <p>Length: 111 min</p>
    <p>Example Example Example</p>
    <p>Example Example Example Example Example Example Example Example Example Example Example</p>
  </div>
</div>

edited Aug 28 '19 at 11:23

answered Aug 28 '19 at 10:57

Sumit Patel

4,530
1
10
28

so removing it will solve the problem? – user10497113 Aug 28 '19 at 10:59
It want resolve the problem. 1. You have to use that image as background image. 2 if you want fix width then height need to be auto. 3. if you want height to be fixed then width need to be auto. this way your image want stretched in any design. I would suggest you use as background image. – Sumit Patel Aug 28 '19 at 11:06
This is a comment and not an answer to the (off topic) question. https://stackoverflow.com/help/how-to-answer – Rob Aug 28 '19 at 11:07
I add one example as snippet which will help you get the desire output. – Sumit Patel Aug 28 '19 at 11:25

Stretched Images in IE 11

1 Answers1