0

Este es el marcado que tengo, necesito que la imagen de la primer columna ocupe todo el alto disponible hasta igualar al alto de la segunda columna, independientemente de si los títulos ocupan dos o tres lineas, y si las imágenes tienen distintos tamaños.

¿Como podría resolverlo?

Gracias

<div class="container">
<div class="row">
    <div class="col-md-8 col-lg-8">
        <div class="card card-inverse card-primary">
            <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
            <img src="http://placehold.it/800x500" class="img-fluid" alt="Responsive image">
        </div>
    </div>
    <div class="col-md-4 col-lg-4">
        <div class="row h-100">
            <div class="col-md-12">
                <div class="row h-100">
                    <div class="col-md-12 pb-2">
                        <div class="card bg-success h-100">
                                <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
                              <img src="http://placehold.it/800x500" class="img-fluid" alt="Responsive image">
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="card bg-success h-100">
                            <h2>Lorem ipsum dolor sit amet, </h2>
                              <img src="http://placehold.it/800x500" class="img-fluid" alt="Responsive image">
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

texto

1
  • Entonces que la imagen sea fondo y los textos sobre salgan a esta?
    – user128299
    Commented el 16 abr. 2020 a las 20:43

1 respuesta 1

0

Lo que hice fue añadirle la clase CSS "h-100" a la card grande, como la card ya tiene la propiedad flex aplicada lo unico que hizo falta fué añadirle la clase CSS "flex-md-grow-1" a la imagen hija y lo que hace la clase es que ocupe mas espacio del div padre.

Hice un ejemplo que puedes probar:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <style>
    .img-adaptation {
      object-fit: cover;
      object-position: center;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-lg-8">
        <div class="card card-inverse card-primary h-100">
          <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
          <img src="https://picsum.photos/800/500.webp" class="img-fluid flex-md-grow-1 img-adaptation" alt="Responsive image">
        </div>
      </div>
      <div class="col-md-4 col-lg-4">
        <div class="row">
          <div class="col-md-12">
            <div class="row">
              <div class="col-md-12 pb-2">
                <div class="card bg-success">
                  <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
                  <img src="https://picsum.photos/800/500.webp" class="img-fluid img-adaptation" alt="Responsive image">
                </div>
              </div>
              <div class="col-md-12">
                <div class="card bg-success">
                  <h2>Lorem ipsum dolor sit amet, </h2>
                  <img src="https://picsum.photos/800/500.webp" class="img-fluid img-adaptation" alt="Responsive image">
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
</body>

</html>

NOTA: Un extra que añadi fue una clase personaliza que llamé "img-adaptation" que hace que la img no se deforme, por si la relación de aspecto de la img original es muy diferente.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.