Estoy usando bootstrap v4 tarjetas en mi diseño, y por desgracia, las imágenes se distorsionan en Internet Explorer 11. Parece que IE ignora por completo el height: auto atributo dado por la img-fluid clase. Es necesario aplicar una altura personalizada a las imágenes de la tarjeta? Sin embargo, las tarjetas de representar perfectamente en Chrome y Firefox. Curiosamente, si puedo cambiar el motor de IE 10 (en el F12 de la consola), el problema se ha ido.

Como imágenes con la clase img-fluid que no son envueltos por las tarjetas se muestran respetando su coeficiente original, creo que el problema corresponde al diseño de la tarjeta.

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

OriginalEl autor ddzone | 2017-02-07

8 Comentarios

  1. 7

    Tuve el mismo problema, pero cuando me envuelve el contenido de la tarjeta en un <a> etiqueta a hacer es hacer clic y se fija a sí mismo, pero a la altura de la tarjeta estaba mal en IE11, me fijo que mediante la adición de height: 100% a la <a> etiqueta :

    <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 usted no desea que su tarjeta se puede hacer clic, usted puede reemplazar la <a> por un <div> (yo no lo he probado).

    Sí, en sustitución de la <a> con <div class="h-100"> también está trabajando.
    La adición de h-100 a la <a> trabajó para mí como por arte de magia. Gracias Christophe.

    OriginalEl autor Christophe Le Besnerais

  2. 1

    Addding height:100%; también se puede hacer a:

    .card img{
      height:100%;
    }

    si usted no desea añadir otra clase, etc para solucionar problemas en el explorador.

    OriginalEl autor Maximus

  3. 0

    uso overflow: hidden para contenedor externo

    OriginalEl autor Mihon

  4. 0

    En línea estilo de hacer la magia…

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

    OriginalEl autor Ras C-kay sKatle

  5. 0

    Este es un problema conocido. Usted puede solucionar este problema mediante la adición de width: 100%;

    De acuerdo a los documentos:

    Imágenes SVG y IE 10 En Internet Explorer 10, con imágenes SVG con
    .img-líquido son desproporcionadamente tamaño. Para solucionar este problema, agregue width: 100%
    \9; en caso necesario. Esta revisión indebidamente los tamaños de otros formatos de imagen, así
    Bootstrap no se aplica automáticamente.

    Usted puede consultar la documentación en este enlace: https://getbootstrap.com/docs/4.3/content/images/

    OriginalEl autor Manuel Abascal

  6. 0

    la solución es añadir d-block (display:block) para el div padre:

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

    OriginalEl autor Jonathan Laliberte

  7. -2

    He tenido el mismo problema. Acaba de agregar los regulares de la vieja escuela de la clase «img-responsive» & parece estar funcionando bien en Chrome ahora.

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

    Actualización de BS versión 4:

    img-responsive 

    es ahora

    img-fluid

    OriginalEl autor Kerry7777

Dejar respuesta

Please enter your comment!
Please enter your name here