▷Mosaico de imágenes HTML / CSS ✔️ Foro Ayuda 【 2024 】

Nuestro team de trabajo ha pasado mucho tiempo buscando respuestas a tus dudas, te ofrecemos la soluciones y esperamos serte de mucha ayuda.

Solución:

Para dar una respuesta adecuada, primero voy a aclarar los requisitos:

todas las imágenes tienen la misma relación de aspecto: 3/2
las imágenes no deben ser recortadas
sin espacio entre imágenes
hacer un mosaico de imágenes

Puedes tener miles de posibilidades para mostrar tus imágenes. Voy a hacer un diseño simple que debería mostrarte la forma de construir el tuyo propio.

Aquí hay un FANCY FIDDLE de lo que puede lograr y así es como se ve:

Codigo:

body, html 
    width:100%;
    margin:0;
    padding:0;

#wrap 
    width:984px;
    height:492px;

.big_col, .medium_col, .small_col
    height:492px;
    float:left;

img 
    display:block;
    margin:0;
    padding:0;
    border:none;
    float:left;

.big_col 
    width:328px;

.medium_col
    width:164px;

.small_col
    width:82px;

.big_img img 
    width:328px;
    height:492px

.medium_img img 
    width:164px;
    height:246px;

.small_img img 
    width:82px;
    height:123px;

Primer paso: pensar, calcular y pensar de nuevo

Primero : Para hacerlo simple, digamos que sus imágenes pueden tener 3 tamaños (cambié el tamaño de la imagen en 1 px para facilitar los cálculos):

grande : 328*492px
mediano, 1/2 de grande: 164*246px
pequeño, 1/4 de grande: 82*123px

Segundo : Como todas sus imágenes son retratos y su contenedor tiene la misma altura que la imagen grande, tendrá que trabajar con columnas de 492px de altura que pueden tener 3 anchos:

grande : 328px de ancho, pueden mostrar imágenes de todos los tamaños
medio : 328/2 = 164px de ancho, pueden mostrar imágenes medianas y pequeñas
pequeña : 327/4 = 82px de ancho, solo pueden mostrar imágenes pequeñas

Tercera : ¿Cuántas columnas y qué tamaños de imagen? Depende de usted, tendrá que hacer una elección de acuerdo con el ancho total de su contenedor y la cantidad de imágenes que desea mostrar.

Pero en tu violín, el contenedor (._pictures1) tiene un 935px ancho que será imposible de lograr con los anchos de columna elegidos justo antes.

935/82 = 11.4024...

Lo más cercano que puedes conseguir es 82*12 = 984px recipiente ancho.

Tendrá que cambiar el ancho del contenedor o cambiar el tamaño de las imágenes y las columnas para que se ajusten a su ancho inicial.

O (spoiler) puede trabajar con porcentajes, esta puede ser una alternativa, especialmente si necesita que su diseño sea receptivo, pero esto puede complicarse y estoy tratando de simplificar las cosas.

Como estoy seguro de que tiene curiosidad y desea comprobarlo, aquí hay un diseño de ejemplo en un

Mosaico receptivo de violín de imágenes

Fragmento de código :

body, html 
    width:100%;
    margin:0;
    padding:0;

#wrap 
    width:100%;

.big_col, .medium_col, .small_col
    float:left;

img 
    height:auto;
    display:block;
    margin:0;
    padding:0;
    border:none;
    float:left;

.big_col 
    width:25%;

.medium_col
    width:12.5%;

.small_col
    width:6.25%;


.small_col img
    width:100%;

.medium_col>img 
    width:100%;

.medium_col .small_img img 
    width:50%;

.big_col .small_img img 
    width:25%;

.big_col .medium_img img 
    width:50%;

.big_col img 
    width:100%;

Siguiente paso: diseñar el diseño

Use un bolígrafo, photoshop o cualquier otra herramienta que se adapte a usted, si es realmente bueno, incluso puede usar su cerebro para representar mentalmente el diseño que desee.

Diseñé la imagen que puedes ver al principio de la respuesta.

Como dije antes, hay muchas posibilidades de diseño (número de columnas y tamaños de imágenes en esas columnas), así que para el ejemplo elegí 2 columnas grandes, 1 mediana y 2 pequeñas.

328*2+164+82*2 = 984px ( = width of container so it can fit!)

Último paso: ¡empieza a codificar!

Puedes ver el resultado en este

VIOLÍN

Este diseño se basa en flotadores, por lo que debemos definir el ancho, la altura del contenedor, las columnas, las imágenes para que puedan encajar muy bien entre sí (como ya lo hemos pensado con el cálculo y el diseño, es fácil).

body, html 
    width:100%;
    margin:0;
    padding:0;

#wrap 
    width:984px;
    height:492px;

.big_col, .medium_col, .small_col
    height:492px;
    float:left;

img 
    display:block;
    margin:0;
    padding:0;
    border:none;
    float:left;

.big_col 
    width:328px;

.medium_col
    width:164px;

.small_col
    width:82px;

.big_img img 
    width:328px;
    height:492px

.medium_img img 
    width:164px;
    height:246px;

.small_img img 
    width:82px;
    height:123px;

Si establece una dimensión u otra, pero no ambas, las imágenes deben cambiar de tamaño de manera fluida. Intente establecer solo el ancho en una unidad de porcentaje.

En primer lugar, para eliminar el espacio entre imágenes, simplemente elimine el conjunto en ‘0’ padding y margin.

Luego, para lograr lo que desea, puede usar o combinar esas estrategias:

1) Asigne un tamaño fijo en píxeles a uno de los tamaños: el otro se escalará automáticamente.

2) Puede calcular el tamaño que necesita a través de javascript y asignar el valor dinámicamente. Por ejemplo, con jQuery framework:

$(img).each(function()
 var h = this.height();
 var w = this.width();


 if (w => h)
  this.attr('width', w*0.66);

else 
  this.attr('height',h*.066);

);

3) Puede usar css background-image para divs y background-size: cover o background-size: contain según lo necesite, estática o dinámicamente (w3c docs

Comentarios y valoraciones

¡Haz clic para puntuar esta entrada!

(Votos: 0 Promedio: 0)

Mosaico de imágenes HTML / CSS