Estoy tratando de construir siguiente diseño de la tarjeta usando Bootstrap 4 con flexbox habilitado. La imagen está tomada desde mi aplicación actual y funciona como se esperaba.

Bootstrap/flexbox tarjeta: mover la imagen a la izquierda/derecha en el escritorio

Estructura HTML es la siguiente:

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="card">
          <div class="card-block">
            <h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <img class="card-img-bottom" src="img1.jpg" alt="" title="">
      </div>
    </div>
  </div>
</section>

Ahora, cuando me la escala a la pantalla más grande, obtuve la siguiente salida (que se espera con Bootstrap, pero no quería uno):

Bootstrap/flexbox tarjeta: mover la imagen a la izquierda/derecha en el escritorio

Lo que me gustaría ver en su lugar es:

Bootstrap/flexbox tarjeta: mover la imagen a la izquierda/derecha en el escritorio

Así que mi pregunta es, ¿cómo puedo implementar correctamente este tipo de diseño? Estoy usando flex-box, así Bootstrap columnas (col-*) siempre están a la misma altura que es exactamente lo que quiero. Pero debo quitar el padding entre dos columnas, a continuación, hacer que tanto el contenido de las columnas siempre para cubrir el 100% de los padres de altura, y por último, asegúrese de que la imagen mantiene la relación de aspecto, por lo que debe ser recortada desde el centro como lo tengo en el ejemplo.

He buscado en Google y probado muchas soluciones diferentes, pero todos ellos parece ser demasiado complejo o «chapucero» soluciones. Entonces, me pregunto, ¿es cierto que no hay ninguna manera fácil de implementar este tipo de diseño…?

Nota: la solución no tiene que ser Bootstrap relacionados, la solución general para este tipo de problema es aún mejor.

de fondo de tamaño el objeto o el ajuste de la «fácil» CSS soluciones.
Sí, es cierto, pero con un fondo de tamaño, no se pueden utilizar las que la etiqueta img, pero tiene que usar div lugar? Y creo objeto de ajuste no es compatible con IE y de Borde, de manera que no es aceptable la solución entonces.
Esos son los dos «fácil» maneras. Por supuesto, las cosas se ponen más complicadas si es necesario implementar alternativas para mayores/incapaz navegadores. Para el objeto de ajuste en las imágenes en IE/Edge hay soluciones/polyfills por ahí.
Elegí background-size camino a seguir. Yo en realidad quería utilizar la etiqueta img, sino más bien el sacrificio que ir excesivamente complejas soluciones alternativas y mecanismos.

OriginalEl autor m5seppal | 2016-08-30

2 Comentarios

  1. 22

    Me di cuenta de una manera de hacer esto, el uso de background-size: cover. Tuve que usar div en vez de img, pero de lo contrario, esta solución funciona y en mi caso img no es tan necesario. Otras soluciones son bienvenidos.

    He modificado mi html un poco:

    <section>
      <div class="container">
        <div class="card">
          <div class="row">
            <div class="col-md-6">
              <div class="card-block">
                <h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4>
                <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p>
                <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p>
                <a href="#" class="btn btn-primary">Read More</a>
              </div>
            </div>
            <div class="col-md-6">
              <div class="card-img-bottom">
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    Para tarjeta-img-abajo, me puse de estilo:

    .card-img-bottom {
      color: #fff;
      height: 20rem;
      background: url(images/img1.jpg) center no-repeat;
      background-size: cover;
    }

    Y en la vista de escritorio, puedo cambiar la altura a 100%, por lo que la altura es siempre la misma que la altura de la tarjeta de bloque.

    Todavía hay un poco de relleno adicional entre la tarjeta de bloque y de la tarjeta-img de fondo en la vista de escritorio porque de arranque por defecto rellenos. Por esa razón, el área blanca es ligeramente más grande que la imagen. Para mí, no es un problema así que no me los quite.

    Bootstrap/flexbox tarjeta: mover la imagen a la izquierda/derecha en el escritorio

    Vea este ejemplo : getbootstrap.com/docs/4.1/examples/blog
    Yo no considerar esta soportado oficialmente – su tarjeta de visita-img-clase de derecho es en una secundaria archivo css para que el ejemplo no es la principal de la distribución… Horizontal de la tarjeta de apoyo es actualmente solicitada: github.com/twbs/bootstrap/issues/20794
    Muchas gracias, div class=»fila» ayuda mucho
    Usted puede jugar con p-0 y m-0 para establecer el relleno o el margen de cero (0) para quitar el marco gris.

    OriginalEl autor m5seppal

  2. 0

    Una solución que he encontrado, estoy teniendo problemas con la altura de la imagen, pero esa es otra cuestión …: P

    ACEPTAR, el gran problema de reinventar algo que ya está listo es que las soluciones tienden a dar problemas cuando tenemos las características originales, así que en mi solución, se acaba de agregar una clase, que trabajaría en conjunto con el otro caso, la clase fue usado , por lo que si la «tarjeta-img-izquierda» de la clase existe la «tarjeta-budy» clase tendría un margen izquierdo proporcional al tamaño de la alineado a la izquierda de la imagen, si la clase no existe este margen sería el original.
    Se trata de una solución viable y que no iba a desestabilizar el sistema original, pero tiene que ser refinado …

     .card {
          overflow: hidden;
      }
    
        .card-img-left {
            position: absolute;
            height: auto;
            max-height: 100%;
            width: auto;
            max-width: 40%;
        }
    
        .card-img-left ~ .card-body {
            margin-left: 40%;
        }

    OriginalEl autor Luciano Lourenço

Dejar respuesta

Please enter your comment!
Please enter your name here