¿Cómo hacer que div que contenga imágenes tenga un tamaño fijo usando Bootstrap?

En este artículo, veremos cómo podemos hacer un div que contenga imágenes con un tamaño fijo. Esto puede ser muy útil al diseñar una página web para mostrar un determinado tipo de producto. Usaremos bootstrap para implementar la solución para el problema anterior.

Enlace CDN de Bootstrap: https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css

Ejemplo: Ahora veámoslo con la ayuda de un ejemplo.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
    crossorigin="anonymous">
  
    <style>
        .album {
            display: flex;
            align-items: center;
            justify-content: center;
        }
          
        .imgContainer {
            max-width: 400px;
            max-height: 700px;
            overflow: hidden;
        }
          
        .imgContainer img {
            width: 100%;
            min-height: 100%;
        }
    </style>
</head>
  
<body>
    <div class="album">
        <div class="imgContainer">
            <div class="row mt-3">
                <div class="col px-2">
                    <img src="1.jpeg">
                </div>
                <div class="col px-2">
                    <img src="1.jpeg">
                </div>
            </div>
  
            <div class="row mt-3">
                <div class="col px-2">
                    <img src="2.jpeg">
                </div>
                <div class="col px-2">
                    <img src="2.jpeg">
                </div>
            </div>
  
            <div class="row mt-3">
                <div class="col px-2">
                    <img src="3.jpeg">
                </div>
                <div class="col px-2">
                    <img src="3.jpeg">
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

En el código anterior, podemos agregar varias filas y también varias imágenes en la misma fila, y el tamaño de todas las imágenes seguirá siendo el mismo.

Producción:

Publicación traducida automáticamente

Artículo escrito por parasmadan15 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *