web-dev-qa-db-fra.com

Image de la carte d'amorçage déformée dans Internet Explorer

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

Comme les images avec la classe img-fluid qui ne sont pas entourées de cartes sont affichées en respectant leur rapport d'origine, je pense que le problème correspond à la présentation de la 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>
csstwitter-bootstrapinternet-explorer-11bootstrap-4twitter-bootstrap-4
9
ddzone

Bootstrap 4 est toujours en alpha, vous devez donc vous attendre à divers problèmes.

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

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

4
Zim

J'ai eu le même problème, mais lorsque j'ai emballé le contenu de la carte dans une balise <a> pour la rendre cliquable et que celle-ci se corrige, mais que la hauteur de la carte était incorrecte dans IE11, j'ai corrigé le problème en ajoutant height: 100% à la balise <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>

Si vous ne voulez pas que votre carte soit cliquable, vous pouvez remplacer le <a> par un <div> (je ne l'ai pas testé).

6
Christophe Le Besnerais

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

Selon les documents:

Images SVG et IE 10 Dans Internet Explorer 10, les images SVG avec .img-fluid sont de taille disproportionnée. Pour résoudre ce problème, ajoutez width: 100% \9; Où il faut. Ce correctif redimensionne les autres formats d'image, donc Bootstrap ne l’applique pas automatiquement.

Vous pouvez consulter la documentation via ce lien: https://getbootstrap.com/docs/4.3/content/images/

0
Manuel Abascal

utiliser overflow: hidden pour le conteneur externe

0
Mihon

Le style en ligne fait la magie ...

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

0
Ras C-kay sKatle

Ajout de hauteur: 100%; peut également être fait pour:

.card img{
  height:100%;
}

si vous ne voulez pas ajouter une autre classe, etc., pour résoudre des problèmes dans l'Explorateur.

0
Maximus