Quiero hacer un diseño de imagen con imágenes de retrato dentro de un div
con una relación de aspecto fija de 3:2
. El tamaño de las imágenes es 327x491px
.
El problema principal son los espacios no deseados entre las imágenes. ¿Cómo alineo las imágenes como un mosaico usando solo HTML / CSS ?
HTML:
... SO ON ...
CSS:
._pictures1 { width: 935px; height: 490px; margin: -26px 0 0 59px; float: left; top: 20%; left: 20%; position: absolute; border: 1px gray solid; } ._pictures1 div {position: absolute;} ._pictures1-01 {top: 0px; left: 35px;} ._pictures1-02 {top: 200px; left: 0px;} /* ... SO ON ... */
jsfiddle
Para hacer una respuesta adecuada, primero voy a aclarar los requisitos:
Puede tener miles de posibilidades para mostrar sus imágenes. Voy a hacer un diseño simple que debería mostrarle la manera de construir el suyo.
Aquí hay una FIDELIZACIÓN de lo que puedes lograr y así es como se ve:
Primero: para simplificar, digamos que sus imágenes pueden tener 3 tamaños (cambié el tamaño de la imagen por 1 px para facilitar los cálculos):
328*492px
164*246px
82*123px
Segundo: Como sus imágenes son todos retratos y su contenedor tiene la misma altura que la imagen grande, tendrá que trabajar con columnas elevadas de 492px que pueden tener 3 anchos:
328px
ancho, pueden mostrar imágenes de todos los tamaños 328/2 = 164px
ancho, pueden mostrar imágenes medianas y pequeñas 327/4 = 82px
ancho, solo pueden mostrar imágenes pequeñas Tercero: ¿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 ancho de 935px
que será imposible de lograr con los anchos de columna elegidos justo antes.
935/82 = 11.4024...
Lo más cercano que puede obtener es 82*12 = 984px
ancho contenedor.
Deberá cambiar el ancho del contenedor o bien cambiar los tamaños de las imágenes y las columnas para que se ajusten a su ancho inicial.
O (spoiler) puede trabajar con porcentajes, esto puede ser una alternativa especialmente si necesita que su diseño responda, pero esto puede complicarse y estoy tratando de simplificar las cosas.
Como estoy seguro de que tiene curiosidad y desea verificarlo, aquí hay un diseño de ejemplo en una
Use un bolígrafo, un photoshop o cualquier otra herramienta que le convenga, si es realmente bueno, incluso puede usar su cerebro para representar mentalmente el diseño que desea.
Diseñé la imagen que puedes ver al principio de la respuesta.
Como dije antes, hay muchas posibilidades de diseño (cantidad de columnas y tamaños de imágenes en esas columnas), por lo 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!)
Puedes ver el resultado en esto
Este diseño se basa en flotantes, por lo que debemos definir el ancho, la altura del contenedor, las columnas, las imágenes para que todos puedan encajar unos junto a otros (como ya hemos pensado con cálculo y diseño, es fácil).
CSS:
#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:493px } .medium_img img { width:164px; height:246px; } .small_img img { width:82px; height:123px; }
Luego, el marcado HTML:
Si establece una dimensión u otra, pero no ambas, las imágenes deben cambiar de tamaño de forma fluida. Intenta configurar solo el ancho a un porcentaje de unidad.
En primer lugar, para eliminar el espacio entre las imágenes, simplemente elimine el ajuste a ‘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
lo que necesite, estática o dinámicamente ( w3c docs)
El posicionamiento absoluto no parece ser la mejor opción si desea mantener dinámicamente las mismas posiciones y la misma relación.
El flujo de HTML nativo suele ser el camino a seguir. El posicionamiento absoluto es como tabletas de vitaminas. Lo usas cuando lo necesitas, pero no es tu comida principal. 😉
Lo que yo haría es:
simplemente coloque el contenedor como desee (centrado, por ejemplo) y mida su ancho con el porcentaje de la ventana / sección en la que se encuentra.
Luego pones tus divs ._pictures1-xx dentro de él, y dimensionas el ancho de las fotos usando el porcentaje del contenedor. La altura mantendrá la relación automáticamente (*)
Luego haría que los divs ._pictures1-xx mostraran “inline-block” y floten “left”. Luego, un pequeño div con “dos” claros después de la última foto y cierre el contenedor.
(*) recordatorio: el valor predeterminado de ancho o alto es “automático”, es decir, cualquier tamaño que mantenga la proporción de la imagen cuando el otro sea un valor px /%. Los márgenes horizontales se vuelven dynamics de forma nativa cuando se define la altura de sus imágenes, para mantener las proporciones de sus imágenes. Si define el ancho y deja la altura automática, entonces la altura es dinámica para mantener la proporción de las imágenes, y los márgenes no cambian.
Espero que esto haya sido útil.
Me gustaría dar una solución simple.
Simplemente puede ajustar la etiqueta img
con DIV. Y debe aplicar CSS a este DIV empaquetado.
En lugar de esto

Use el siguiente tipo de estructura
// suggestion: target IMG with parent class / ID .img_wrapper img{ width: 100%; height: auto; }
Todas las imágenes dentro de la clase .img_wrapper
tendrían una relación de aspecto adecuada.
envuelve tu imagen con un div. establece el ancho y alto para el div de acuerdo a la proporción. Da solo altura para la imagen. Si desea que la imagen ocupe solo el espacio que necesitan, use display: inline also
Pruebe algo como esto
Estilo
body{ background: black; width:80%; margin:5em auto; display:block; } .wrapper{ background:#FFF; float:left; } .container{ height:476px; width:192px; display:inline-block; float:left; } .small{ height:188px; width:125px; display:block; margin:0 auto; background:#333; } .medium{ background:#666; width:192px; height:288px; } .large{ height:476px; width:200px; background:#999; display:inline-block; float:left; }
Esto es HTML
img{ height: auto; width: 50% }
aspectRatioResizeImg
Este es un complemento jQuery que permite cambiar el tamaño de una imagen conservando su relación de aspecto, ajustando un contenedor. Opcionalmente, el contenedor puede redimensionarse para que coincida con la relación de aspecto de la imagen.
https://github.com/stereoactivo/jquery.resize-image-aspect-ratio
En mi experiencia: si solo establece la dimensión ya sea de altura o de ancho ( no ambas ), la imagen se escalará en consecuencia.