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