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

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

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:

Primer paso: pensar, calcular y pensar de nuevo

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):

1. grande: 328*492px
2. medio, 1/2 de grande: 164*246px
3. pequeño, 1/4 de grande: 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:

1. grande: 328px ancho, pueden mostrar imágenes de todos los tamaños
2. medio: 328/2 = 164px ancho, pueden mostrar imágenes medianas y pequeñas
3. pequeño: 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

Mosaico receptivo de la imagen

Siguiente paso: diseña el diseño

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!) 

Último paso: ¡comienza a codificar!

Puedes ver el resultado en esto

VIOLÍN

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:

1. 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.

2. 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 (*)

3. 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.

Código de ejemplo

En lugar de esto

Use el siguiente tipo de estructura

CSS

 // 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.