wake-up-neo.net

Bootstrap-Kartenbild in Internet Explorer verzerrt

Ich verwende Bootstrap-v4-Karten in meinem Layout. Leider sind die Bilder in Internet Explorer 11 verzerrt. Es scheint, dass IE das von der Klasse height: auto angegebene img-fluid-Attribut vollständig ignoriert. Ist es notwendig, eine benutzerdefinierte Höhe auf die Kartenbilder anzuwenden? Die Karten werden jedoch perfekt in Chrome und Firefox dargestellt. Interessanterweise ist das Problem weg, wenn ich die Engine auf IE 10 ändere (in der F12-Konsole).

Da Bilder mit der Klasse img-fluid, die nicht von Karten umhüllt sind, entsprechend ihrem ursprünglichen Verhältnis angezeigt werden, denke ich, dass das Problem dem Kartenlayout entspricht.

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

Bootstrap 4 befindet sich noch in Alpha. Sie sollten also mit verschiedenen Problemen rechnen.

Das Problem mit der Bildhöhe in IE 11 wurde bereits erkannt und kann hier nachverfolgt werden:

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

4
Zim

Ich hatte das gleiche Problem, aber als ich den Inhalt der Karte in ein <a>-Tag einwickelte, um sie anklickbar zu machen und sich selbst zu beheben, aber die Höhe der Karte war in IE11 falsch, habe ich dies durch Hinzufügen von height: 100% zum <a>-Tag behoben:

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

Wenn Sie nicht möchten, dass Ihre Karte anklickbar ist, können Sie den <a> durch einen <div> ersetzen (ich habe es nicht getestet).

Dies ist ein bekanntes Problem. Sie können dies beheben, indem Sie width: 100%; hinzufügen.

Gemäß Dokumenten:

SVG-Bilder und IE 10 In Internet Explorer 10 können SVG-Bilder mit .img-Flüssigkeit ist überproportional groß. Fügen Sie width hinzu: 100% \9; wo nötig. Bei diesem Fix werden andere Bildformate falsch formatiert, so dass Bootstrap wendet es nicht automatisch an.

Sie können die Dokumente in diesem Link überprüfen: https://getbootstrap.com/docs/4.3/content/images/

0
Manuel Abascal

die Lösung besteht darin, d-block (Anzeige: Block) zum übergeordneten Div:

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

verwenden Sie overflow: hidden für den externen Container

0
Mihon

Inline-Styling macht den Zauber ...

zB .: style="height: 100%; overflow: hidden;"

0

Hinzufügen der Höhe: 100%; kann auch gemacht werden:

.card img{
  height:100%;
}

wenn Sie keine weitere Klasse hinzufügen möchten, usw., um Probleme im Explorer zu beheben.

0
Maximus