CSS max-width no proporciona cambio de tamaño proporcional

Question

Tengo una visión estrecha de que estoy insertando algo de HTML en. De vez en cuando hay una imagen que es demasiado amplia, así que he estado envolviendo la cadena HTML original, el uso de este CSS para mantenerla bajo control:

<style type="text/css">p{max-width:100%;}img {max-width:100%;}</style> 
<div style=\"word-wrap:break-word\"> 
. 
. ...original HTML inside the div wrapper... 
. 
</div> 

Pero no escala la anchura y la altura de las imágenes proporcionalmente, por lo que el resultado es una imagen muy distorsionada. ¿Hay algo más que pueda hacer, preferiblemente con CSS o algo igualmente fácil?

Esto está incrustado dentro de una vista web en una aplicación de iOS. No quiero escribir código para analizar a través del HTML original y buscar imágenes. Necesito una solución simple que aproveche los métodos que son compatibles con la clase UIView nativa.

---

ACTUALIZACIÓN:

Usando el ejemplo de la respuesta por debajo de Kyle, creo que el problema está ocurriendo con las imágenes que se han incrustado anchura y la altura atributos:

ejemplo de Kyle:

<div style="word-wrap:break-word"> 
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png"> 
</div> 
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png"> 

Modificado, con ancho y alto agregados al primer enlace de imagen

<div style="word-wrap:break-word"> 
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png" WIDTH="100%" HEIGHT="100%"> 
</div> 
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png"> 

Tanto el uso de este CSS:

div {width:100px;} 
p{max-width:100%;} 
img{max-width:100%;} 

Realmente no hace ninguna diferencia si el atributo de anchura contenedor se establece o no. Lo intenté en ambos sentidos.

De hecho, en this case (link) parece que la imagen se escala primero por los atributos de ancho y alto, seguido por el ancho reducido por el ancho máximo de CSS. Esto lleva a un efecto muy extraño.

Answer 1

Es realmente fácil, simplemente agregue un ancho para el elemento principal.

div 
{ 
    width: 100px; 
} 

Demo here.

Answer 2

no estoy segura de haber entendido la derecha a su pregunta, pero aquí es una idea:

http://jsfiddle.net/FyC6r/4/

.mydiv 
{ 
    width:200px; 
    height:150px; 
    border: 1px solid red; 
} 

.mydiv img 
{ 
    width:100%; 
} 

<div class="mydiv"> 
    <img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png"> 
</div> 

esta manera usted tendrá una imagen cambiada de tamaño proporcionalmente DependsOn lo que necesita en primer lugar, la ancho o alto ... dejando solo un ancho del 100% en CSS significa que la imagen se redimensionará para ajustarse a la div por el ancho y la altura se redimensionará las mismas veces que el ancho para que se respete la escala.

bien ... si quieres cambiar el tamaño de ancho y alto, entonces tendrás una distorsión de la imagen debido a diferentes escalas. Puede cambiar el ancho y el alto del estilo img para cambiarlos y ajustar una imagen, pero cuando se agrega otra con diferentes tamaños obtendrá una imagen visualizada incorrectamente.Me gustaría ir para el ancho para evitar que cambia de tamaño, porque en la altura, siempre hay espacio debajo de la pantalla :)

Answer 3

Para mantener las proporciones adecuadas utilizan:

img { 
    max-width: 100%; 
    height: auto; 
} 

Los height: auto correcciones de las proporciones.