Asegúrese de redimensionar el contenido para que quepa dentro de un div fijo

Question

Ok, este es el problema: tengo un div configurado para casi todo el tamaño de la pantalla (en un dispositivo móvil), el contenido se colocará dentro de él, sin embargo el el contenido en sí no está bajo mi control directo. No habrá estilos en línea en las imágenes o enlaces dentro. Necesito asegurarme de que:

1 - Todo está visible dentro del div, y si hay líneas largas, se ven obligados a envolver, o simplemente se cortan.

2 - Las imágenes deben mantener su relación de aspecto, pero se cambian de tamaño para mantenerse dentro de los límites del div.

3 - El contenido debe "llenar" el espacio, haciéndose más grande o más pequeño según sea necesario.

Una última bonificación: Habrá un máximo de UNA imagen en el contenido, pero podría haber múltiples enlaces.

He encontrado algunas otras respuestas aquí, pero nada que cumpla este desafío en particular.

jQuery es una opción, pero he encontrado que es lento en dispositivos móviles, jQuery Mobile es una opción, pero el mismo problema básico.

Cuál es la mejor combinación de CSS y Javascript para realizar esta tarea de la manera más eficiente posible.

Answer 1

#wrapper { 
width: 960px; 
margin: 0 auto; 
overflow: hidden; 
} 

.img_class { 
height:auto; 
width:auto; 
max-width:960px; 
} 

/*If you have a div inside your wrapper then you would need this*/ 

#wrapper .contained_div { 
width: auto; 
display: inline-block: 
margin: 0; 
} 

/*If you want to stack stuffs one after another in a column then use this div */ 
.column { 
margin: 0 10px; 
overflow: hidden; 
float: left; 
display: inline; 
} 

Answer 2

No creo que necesite ninguna forma de JavaScript. Pero sin una muestra de lo que está trabajando, este es mi mejor conjetura:

#divId { height:auto; width:900px; white-space:normal; overflow:hidden; } 
#divId img { height:auto!IMPORTANT; width:auto!IMPORTANT; max-width:900px; } 

(Reemplazar mis valores de anchura con el suyo)

Esto dará formato al texto para que aparezca correctamente dentro del div, pero puede aparecer como una gota de texto, pero eso podría ser lo que quieras. Si desea formatear, deberá usar jQuery para buscar el texto dentro del div para los saltos de línea y reemplazarlos por </p><br /><p> ... Solo asegúrese de agregar las etiquetas de párrafo de apertura y cierre.