0

Quiero hacer un bloque que contenga 4 imagenes ordenadas en linea y columna de 2 x 2 Deberia verse sin margenes interior entre las imagenes. La funcionalidad seria la de un boton grande con 4 opciones que al pulsar fuera a un link distinto cada uno.

Usando "bootstrap" consigo hacer un bloque de 4 x 1

<div class="row">
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
  <div class="view overlay">
    <div>
      <img class="img-fluid inline-block" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" alt="Card image cap">
      <img class="img-fluid inline-block" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" alt="Card image cap">
    </div>
    <div>
      <img class="img-fluid inline-block" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" alt="Card image cap">
      <img class="img-fluid inline-block" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" alt="Card image cap">
    </div>
  </div>
</div>
</div>

Si lo hago de esta manera coloco un bloque de 2 x 2 pero me sale separado en vertical y si la pantalla es pequeña el responsive me lo deja en 4 x 1

<div class="row">
  <div class="col-12 col-sm-6 col-md-6 col-lg-3">
      <div class="view overlay">
          <img class="img-fluid inline-block" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" alt="Card image cap">
          <img class="img-fluid inline-block" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" alt="Card image cap">
      </div>
  </div>
  <div class="col-12 col-sm-6 col-md-6 col-lg-3">
       <div class="view overlay">
           <img class="img-fluid inline-block" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" alt="Card image cap">
           <img class="img-fluid inline-block" src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg" alt="Card image cap">
       </div>
  </div>
</div>
0

1 respuesta 1

1

Pues con Bootstrap 5 aquí tienes una solución (seguro con con la versión 4 también va)

he implementado las clases: en el div padre row row-cols-2 justify-content-center align-items-center y en el div hijo: col p-1 y style="width: auto;"

puedes encontrar esto en la documentación oficial.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div>
        <div class="row row-cols-2 justify-content-center align-items-center">
            <div class="col p-1" style="width: auto;"><img src="https://picsum.photos/id/237/200/200" /></div>
            <div class="col p-1" style="width: auto;"><img src="https://picsum.photos/id/237/200/200" /></div>
        </div>
        <div class="row row-cols-2 justify-content-center align-items-center">
            <div class="col p-1" style="width: auto;"><img src="https://picsum.photos/id/237/200/200" /></div>
            <div class="col p-1" style="width: auto;"><img src="https://picsum.photos/id/237/200/200" /></div>
        </div>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Solo queda la parte javascript: añadirle el evento click a cada imagen.

3
  • Hola, intenta que tus ejemplos de código HTML, CSS y JavaScript sea ejecutable mediante la herramienta de fragmento, y trata de incluir en tus respuestas la documentación de referencia del sitio oficial. gracias por hacer crecer la comunidad, Saludos.
    – user46896
    Commented el 16 oct. 2021 a las 17:13
  • Funciona pero las imagenes deberian hacerse mas grandes o mas pequeñas segun el tamaño de la pantalla donde estuvieran y a ser posible que no hubiera margen interior entre las imagenes.
    – Popularfan
    Commented el 20 oct. 2021 a las 15:09
  • Esa separación está puesta con la clase p-1, ponlo a p-0 para que desaparezcan. En cuanto al tamaño de las imágenes puedes usar los media query de CSS para cambiarlo en función de la pantalla o bien ponerles el tamaño como porcentaje del ancho de pantalla con vw (view width: 40vw es 40% del ancho). Por ejemplo .imagenes{width:25%}.
    – Juan
    Commented el 21 oct. 2021 a las 8:00

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.