Crie uma largura de imagem 100% da div principal, mas não maior que sua própria largura

Estou tentando fazer com que uma imagem (colocada dinamicamente, sem restrições de dimensões) seja tão larga quanto sua div principal, mas apenas enquanto essa largura não for maior que sua própria largura em 100%. Eu tentei isso, sem sucesso:

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

Muitas dessas imagens são muito mais amplas que a div principal, e é por isso que eu gostaria que elas fossem redimensionadas de acordo, mas quando uma pequena imagem aparece e é ampliada além de suas dimensões normais, ela realmente parece terrível. Existe alguma maneira de fazer isso?

Apenas especifique max-width: 100%sozinho, isso deve ser o caso.

Encontrei este post em uma pesquisa no Google e resolvi meu problema graças à resposta @jwal, mas fiz uma adição à sua solução.

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

Com o exposto, alterei a largura máxima para as dimensões do contêiner de conteúdo em que minha imagem se encontra. Nesse caso, é: largura do contêiner - preenchimento - borda = largura máxima

Dessa forma, minha imagem não sairá da div que contém e ainda posso flutuar a imagem dentro da div de conteúdo.

Testei no IE 9, FireFox 18.0.2 e Chrome 25.0.1364.97, Safari iOS e parece funcionar.

Adicional: testei isso em uma imagem com 1024px de largura exibida em 678px (largura máxima) e uma imagem com 500px de largura exibida em 500px (largura da imagem).

Definir uma largura de 100% é a largura total da div em que está, não a imagem original em tamanho normal. Não há como fazer isso sem JavaScript ou outra linguagem de script que possa medir a imagem. Se você pode ter uma largura ou altura fixa da div (como 200px de largura), não deve ser muito difícil definir um intervalo para a imagem ser preenchida. Mas se você colocar uma imagem de 20x20 pixels em uma caixa de 200x300 pixels, ela continuará distorcida.

No estilo de linha - isso funciona sempre para mim

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

Você deve definir a largura máxima e, se quiser, também pode definir um preenchimento em um dos lados. No meu caso, a largura máxima: 100% foi boa, mas a imagem estava ao lado do final da tela.

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

Eu também estava tendo o mesmo problema, mas configurei o valor da altura no meu CSS como automático e isso corrigiu o meu problema. Além disso, não esqueça de fazer a propriedade display.

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

Encontrei uma resposta que funcionou para mim e pode ser encontrada no seguinte link:

Recipientes de largura total em pais de largura limitada

Se a imagem for menor que a principal ...

.img_100 {
  width: 100%;
}

Eu usaria a propriedade display: table-cell

Aqui está o link