Buat lebar gambar 100% dari induk div, tetapi tidak lebih besar dari lebar sendiri

Saya mencoba untuk mendapatkan gambar (ditempatkan secara dinamis, tanpa batasan pada dimensi) menjadi selebar div induknya, tetapi hanya sepanjang lebar itu tidak lebih lebar dari lebarnya sendiri sebesar 100%. Saya sudah mencoba ini, tetapi tidak berhasil:

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

Banyak gambar-gambar ini jauh lebih luas daripada div induknya, itulah sebabnya saya ingin mereka mengubah ukuran sesuai, tetapi ketika gambar kecil muncul di sana dan ditingkatkan di luar dimensi normal, itu benar-benar terlihat mengerikan. Apakah ada cara untuk melakukan ini?

Cukup tentukan max-width: 100%saja, itu harus dilakukan.

Menemukan posting ini di pencarian Google, dan itu menyelesaikan masalah saya berkat balasan @jwal, tapi saya membuat satu tambahan untuk solusinya.

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

Dengan cara di atas, saya mengubah lebar-max ke dimensi wadah konten tempat gambar saya berada. Dalam hal ini adalah: lebar kontainer - bantalan - boarder = lebar maks

Dengan cara ini gambar saya tidak akan keluar dari div yang berisi, dan saya masih bisa mengapung gambar dalam div konten.

Saya sudah menguji di IE 9, FireFox 18.0.2 dan Chrome 25.0.1364.97, Safari iOS dan tampaknya berfungsi.

Tambahan: Saya menguji ini pada gambar 1024px lebar ditampilkan di 678px (lebar maks), dan gambar 500px lebar ditampilkan di 500px (lebar gambar).

Mengatur lebar 100% adalah lebar penuh div yang ada di dalamnya, bukan gambar berukuran penuh asli. Tidak ada cara untuk melakukannya tanpa JavaScript atau bahasa scripting lain yang dapat mengukur gambar. Jika Anda dapat memiliki lebar tetap atau tinggi tetap div (seperti lebar 200px) maka seharusnya tidak terlalu sulit untuk memberikan gambar rentang untuk diisi. Tetapi jika Anda menempatkan gambar 20x20 piksel dalam kotak 200x300 piksel itu masih akan terdistorsi.

Dalam gaya garis - ini bekerja untuk saya setiap saat

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

Anda harus mengatur lebar maks dan jika mau, Anda juga dapat mengatur beberapa bantalan di salah satu sisi. Dalam kasus saya, max-width: 100% bagus tapi gambarnya tepat di sebelah ujung layar.

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

Saya juga mengalami masalah yang sama, tetapi saya mengatur nilai tinggi di CSS saya ke otomatis dan itu memperbaiki masalah saya. Juga, jangan lupa untuk melakukan properti tampilan.

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

Saya menemukan jawaban yang sesuai untuk saya dan dapat ditemukan di tautan berikut:

Kontainer Lebar Penuh di Induk Lebar Lebar

Jika gambar lebih kecil dari orang tua ...

.img_100 {
  width: 100%;
}

Saya akan menggunakan properti display: table-cell

Inilah tautannya