Boot map image distorted in Internet Explorer

Question

I use bootstrap v4 maps in my layout and, unfortunately, the images are distorted in Internet Explorer 11. IE seems to completely ignore the height: auto attribute set by the img-fluid class. Do I need to apply custom height to map images? However, maps render fine in Chrome and Firefox. Interestingly, if I change the engine to IE 10 (in the F12 console), the problem will disappear.

Since img-fluid images that are not wrapped in cards are displayed in accordance with their original ratio, I think the problem corresponds to the location of the card.

  <div class="container"> <div class="row"> <div class="col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="img/1.jpg" alt="Step 1" width="600" height="400" /> <div class="card-block"> <h3 class="card-title">Step 1</h3> <p class="card-text">Text 1</p> </div> </div> </div> <div class="col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="img/2.jpg" alt="Step 2" width="600" height="400" /> <div class="card-block"> <h3 class="card-title">Step 2</h3> <p class="card-text">Text 2</p> </div> </div> </div> <div class="col-md-4"> <div class="card"> <img class="card-img-top img-fluid" src="img/3.jpg" alt="Step 3" width="600" height="400" /> <div class="card-block"> <h3 class="card-title">Step 3</h3> <p class="card-text">Text 3</p> </div> </div> </div> </div> </div> 

Answer 1

Bootstrap 4 is still in alpha, so you should expect various problems.

The problem with image height in IE 11 has already been identified, and you can track it here:

https://github.com/twbs/bootstrap/issues/21885

Answer 2

I had the same problem, but when I wrapped the contents of the map in the <a> tag to make it clickable and it fixed itself, but the map height was incorrect in IE11, I fixed it by adding height: 100% to the <a> tag <a> :

 <div class="col-md-4"> <div class="card h-100"> <a href="/document" style="height:100%;"> <img class="card-img-top img-fluid" src="foo.jpg"> <div class="card-block"> <h4>doc number 4</h4> <p class="card-text">yada yada</p> </div> </a> </div> </div> 

If you do not want your card to be pressed, you can replace <a> with <div> (I have not tested it).

Answer 3

Add Height: 100%; can also be done for:

 .card img{ height:100%; } 

if you do not want to add another class, etc., to fix problems in the explorer.

Answer 4

use overflow: hidden for an external container

Answer 5

Built-in style makes magic ...

for example: style="height: 100%; overflow: hidden;"

Answer 6

This is a known issue. You can fix this by adding width: 100%;

According to the docs:

SVG and IE 10 Images In Internet Explorer 10, SVG images with .img-Fluid are disproportionate. To fix this, add the width: 100% \ 9; where necessary. This hotfix does not correctly size other image formats, so Bootstrap does not automatically apply it.

You can check the docs at this link: https://getbootstrap.com/docs/4.3/content/images/

Answer 7

the solution is to add d-block (display: block) to the parent div:

 <div class="card d-block"> <img class="card-img-top" src="someimage.jpg"> </div> 

Answer 8

I had the same problem. Just added the old school regular class “img-responsive” and it seems to work fine now in Chrome.

 <img class="card-img-top img-responsive" src="images/your-image.jpg" alt="Description"> 

Update BS 4 Version:

 img-responsive 

Now

 img-fluid