Crea una larghezza dell'immagine al 100% del div parent, ma non più grande della sua stessa larghezza

Sto cercando di far sì che un'immagine (posizionata in modo dinamico, senza restrizioni sulle dimensioni) sia larga quanto il suo div parent, ma solo finché quella larghezza non è più larga della sua larghezza al 100%. Ho provato questo, inutilmente:

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

Molte di queste immagini sono molto più larghe del div del loro genitore, motivo per cui mi piacerebbe che si ridimensionassero di conseguenza, ma quando una piccola immagine si apre lì e viene ingrandita oltre le sue dimensioni normali, sembra davvero terribile. C'è un modo per farlo?

Basta specificare max-width: 100%da solo, che dovrebbe farlo.

Ho trovato questo post su una ricerca su Google e ho risolto il mio problema grazie alla risposta di @jwal, ma ho aggiunto un'aggiunta alla sua soluzione.

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

Con quanto sopra ho cambiato la larghezza massima alle dimensioni del contenitore di contenuti in cui si trova la mia immagine. In questo caso è: larghezza contenitore - imbottitura - boarder = larghezza massima

In questo modo la mia immagine non uscirà dal div contenitore e posso ancora far fluttuare l'immagine all'interno del div contenuto.

Ho testato in IE 9, FireFox 18.0.2 e Chrome 25.0.1364.97, Safari iOS e sembra funzionare.

Ulteriore: l'ho testato su un'immagine larga 1024 px visualizzata a 678 px (la larghezza massima) e un'immagine larga 500 px visualizzata a 500 px (larghezza dell'immagine).

L'impostazione di una larghezza del 100% è l'intera larghezza del div in cui si trova, non l'immagine originale a dimensione intera. Non è possibile farlo senza JavaScript o altri linguaggi di scripting in grado di misurare l'immagine. Se puoi avere una larghezza fissa o un'altezza fissa del div (come 200px di larghezza), non dovrebbe essere troppo difficile dare all'immagine un intervallo da riempire. Ma se metti un'immagine di 20x20 pixel in una scatola di 200x300 pixel, sarà comunque distorta.

In linea - questo funziona sempre per me

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

Dovresti impostare la larghezza massima e se vuoi puoi anche impostare un po 'di imbottitura su uno dei lati. Nel mio caso la larghezza massima: 100% era buona ma l'immagine era proprio accanto alla fine dello schermo.

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

Avevo anche lo stesso problema, ma ho impostato il valore di altezza nel mio CSS su auto e questo ha risolto il mio problema. Inoltre, non dimenticare di fare la proprietà display.

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

Ho trovato una risposta che ha funzionato per me e può essere trovata nel seguente link:

Contenitori a larghezza piena in genitori a larghezza limitata

Se l'immagine è più piccola del genitore ...

.img_100 {
  width: 100%;
}

Vorrei usare la proprietà display: table-cell

Ecco il link