Imágenes fluidas en una fila

Question

Me he topado con un pequeño problema que, por alguna razón, no tengo idea de cómo resolver. Puede ser uno de esos casos en los que se ve simple, pero imposible de implementar. Aquí está el problema:

• Me gustaría agregar algunas imágenes una al lado de la otra en un div. Necesitan no tener espacio entre
• El DIV tiene un conjunto de ancho porcentual, por lo que alcanza algún punto, me gustaría que esas imágenes comiencen a hacerse más pequeñas. Lo que sucede ahora es que las imágenes simplemente caen verticalmente cuando el DIV no puede contenerlas por más tiempo.

El truco para que las imágenes disminuyan es agregando IMG {width máximo: 100%; } En el archivo CSS, pero eso no funcionaría en este caso. ¿Me gustaría preguntar si alguien conoce una solución fácil para este problema? Podría intentar establecer el ancho máximo para cada imagen en un número diferente dependiendo de sus anchos, pero me calculan que los cálculos estarán apagados en algunos navegadores (todos sabemos cómo algunos navegadores tratan porcentajes con lugares decimales).

Gracias por adelantado

Ejemplo no laboral:

<div style="width:40%"><img src="img1.jpg" /><img src="img2.jpg" /></div>
CSS: img { max-width: 100%; }

Comentarios: Esto es perfecto para una sola imagen, así que estoy buscando algo tan simple para múltiples imágenes.

Ejemplo de trabajo:

<div style="width:40%"><img src="img1.jpg" style="width:47.88%" /><img src="img2.jpg" style="width:52.12%" /></div>

Comentarios: Calcular los anchos porcentuales es un dolor y no estoy seguro de si funcionará en todos los casos.

Answer 1

Creo que pelearás una batalla cuesta arriba si intentas hacer todo esto dentro de un solo div. Una solución fácil y confiable es usar una tabla. También podría hacerlo con un montón de divs que se aproximan a una mesa.

http://jsfiddle.net/chad/usryx/ - mesas

http://jsfiddle.net/chad/usryx/1/ - Divs disfrazados de tablas

http://jsfiddle.net/chad/usryx/2/ -Un efecto ligeramente diferente con divs de bloque en línea dentro de un espacio blanco: contenedor Nowrap. Solo posible si sabe cuántas imágenes hay en cada fila de antemano

Todo depende de cómo desee que esto se degrade en los navegadores más antiguos. Usar una mesa mantendrá todo en la misma línea, pero el ancho de esa línea sin escala hacia abajo. El uso de divs apilará las imágenes verticalmente.