Bootstrap carte image déformée dans Internet Explorer

Je suis en utilisant bootstrap v4 cartes dans ma mise en page et malheureusement, les images sont déformées dans Internet Explorer 11. Il semble que IE ignore complètement le height: auto attribut donné par le img-fluid classe. Est-il nécessaire d'appliquer une hauteur personnalisée pour les images de la carte? Cependant, les cartes de rendre parfaitement dans Chrome et Firefox. Fait intéressant, si je change le moteur d'IE 10 (F12 console), le problème a disparu.

Que des images avec classe img-fluid qui ne sont pas emballés par des cartes sont affichées dans le respect de leur rapport original, je pense que le problème correspond à la mise en carte.

   <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>

OriginalL'auteur ddzone | 2017-02-07

5

Bootstrap 4 est encore en alpha, donc vous devriez vous attendre à diverses questions.

Le problème avec la hauteur de l'image dans IE 11 a déjà été identifié et vous pouvez le suivre ici:

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

OriginalL'auteur Zim
7

J'ai eu le même problème, mais quand j'ai enveloppé le contenu de la carte dans un <a> balise pour le rendre cliquable et il a fixé lui-même, mais la hauteur de la carte était mal en IE11, j'ai corrigé que par l'ajout d' height: 100% à la <a> tag :
```
<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>
```
Si vous ne voulez pas que votre carte soit cliquable, vous pouvez remplacer l' <a> par un <div> (je n'ai pas testé).

Oui, en remplacement de la <a> avec <div class="h-100"> est également à l'œuvre.
L'ajout de h-100 pour le <a> a travaillé pour moi comme par magie. Merci Christophe.

OriginalL'auteur Christophe Le Besnerais
1

Addding height:100%; peut également être fait pour:
```
.card img{
  height:100%;
}
```
si vous ne voulez pas ajouter une autre classe, etc pour résoudre les problèmes dans l'explorateur.

OriginalL'auteur Maximus
0

utilisation overflow: hidden pour conteneur externe

OriginalL'auteur Mihon
0

Inline style de faire de la magie...

par exemple.: style="height: 100%; overflow: hidden;"

OriginalL'auteur Ras C-kay sKatle
0

C'est un problème connu. Vous pouvez résoudre ce problème en ajoutant width: 100%;

Selon docs:

Images SVG et IE 10 Dans Internet Explorer 10, les images SVG avec
.img-liquide, de façon disproportionnée, de taille moyenne. Pour résoudre ce problème, ajoutez width: 100%
\9; s'il le faut. Ce correctif mal les tailles d'autres formats d'image, donc
Bootstrap ne s'applique pas automatiquement.

Vous pouvez vérifier les docs dans ce lien: https://getbootstrap.com/docs/4.3/content/images/

OriginalL'auteur Manuel Abascal
0

la solution est d'ajouter d-block (display:block) à la div parent:
```
<div class="card d-block">
    <img class="card-img-top" src="someimage.jpg">
</div>
```
OriginalL'auteur Jonathan Laliberte
-2

J'ai eu le même problème. Juste ajouté l'ordinaire ancienne classe d'école "img-responsive" & semble fonctionner correctement dans google Chrome maintenant.
```
<img class="card-img-top img-responsive" src="images/your-image.jpg" alt="Description">
```
Mise à jour de version BS 4:
```
img-responsive 
```
est maintenant
```
img-fluid
```
OriginalL'auteur Kerry7777

Vous devez vous connecter pour publier un commentaire.