Haga que el ancho de la imagen sea 100% del div principal, pero no mayor que su propio ancho

Estoy tratando de hacer que una imagen (colocada dinámicamente, sin restricciones en las dimensiones) sea tan ancha como su división principal, pero solo mientras ese ancho no sea más ancho que su propio ancho al 100%. He intentado esto, en vano:

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

Muchas de estas imágenes son mucho más anchas que su división principal, por lo que me gustaría que cambien de tamaño en consecuencia, pero cuando aparece una pequeña imagen y se amplía más allá de sus dimensiones normales, realmente se ve terrible. ¿Hay alguna forma de hacer esto?

Solo especifique max-width: 100%solo, eso debería hacerlo.

Encontré esta publicación en una búsqueda en Google y resolvió mi problema gracias a la respuesta de @jwal, pero hice una adición a su solución.

img.content.x700 {
  width: auto !important; /*override the width below*/
  width: 100%;
  max-width: 678px;
  float: left;
  clear: both;
}

Con lo anterior, cambié el ancho máximo a las dimensiones del contenedor de contenido en el que se encuentra mi imagen. En este caso es: ancho del contenedor - relleno - borde = ancho máximo

De esta manera, mi imagen no saldrá del div que contiene, y todavía puedo flotar la imagen dentro del div de contenido.

He probado en IE 9, FireFox 18.0.2 y Chrome 25.0.1364.97, Safari iOS y parece funcionar.

Adicional: probé esto en una imagen de 1024px de ancho que se muestra a 678px (el ancho máximo), y una imagen de 500px de ancho que se muestra a 500px (ancho de la imagen).

Establecer un ancho del 100% es el ancho completo del div en el que se encuentra, no la imagen original de tamaño completo. No hay forma de hacerlo sin JavaScript o algún otro lenguaje de script que pueda medir la imagen. Si puede tener un ancho fijo o una altura fija del div (como 200px de ancho), entonces no debería ser demasiado difícil darle a la imagen un rango para llenar. Pero si coloca una imagen de 20x20 píxeles en un cuadro de 200x300 píxeles, seguirá distorsionada.

En estilo de línea: esto me funciona siempre

<div class="imgWrapper">
    <img src="/theImg.jpg" style="max-width: 100%">
</div>

Debe establecer el ancho máximo y, si lo desea, también puede establecer algo de relleno en uno de los lados. En mi caso, el ancho máximo: 100% era bueno, pero la imagen estaba justo al final de la pantalla.

  max-width: 100%;
  padding-right: 30px;
  /*add more paddings if needed*/

También estaba teniendo el mismo problema, pero configuré el valor de altura en mi CSS como automático y eso solucionó mi problema. Además, no olvide hacer la propiedad de visualización.

  #image {
      height: auto;
      width: auto;
      max-height: 550px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      display: block;
 }  

Encontré una respuesta que funcionó para mí y se puede encontrar en el siguiente enlace:

Contenedores de ancho completo en padres de ancho limitado

Si la imagen es más pequeña que la principal ...

.img_100 {
  width: 100%;
}

Usaría la propiedad display: table-cell

Aqui esta el enlace