สร้างความกว้างของรูปภาพ 100% ของ div ระดับบนสุด แต่ต้องไม่ใหญ่กว่าความกว้างของตัวเอง

ฉันกำลังพยายามทำให้รูปภาพ (วางแบบไดนามิกโดยไม่มีข้อ จำกัด เรื่องขนาด) ให้กว้างเท่ากับ div พาเรนต์ แต่ตราบใดที่ความกว้างนั้นไม่กว้างกว่าความกว้างของมันเองที่ 100% ฉันได้ลองแล้ว แต่ก็ไม่เกิดประโยชน์:

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

ภาพเหล่านี้หลายภาพกว้างกว่า div หลักซึ่งเป็นสาเหตุที่ฉันต้องการให้ปรับขนาดตามนั้น แต่เมื่อมีภาพเล็ก ๆ ปรากฏขึ้นที่นั่นและได้รับการปรับขนาดให้เกินขนาดปกติมันดูแย่มาก มีวิธีใดบ้างในการทำเช่นนี้?

เพียงระบุmax-width: 100%คนเดียวที่ควรทำ

พบโพสต์นี้ในการค้นหาของ Google และแก้ไขปัญหาของฉันได้ด้วยการตอบกลับของ @jwal แต่ฉันได้เพิ่มวิธีแก้ปัญหาของเขาอีกหนึ่งรายการ

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

จากด้านบนฉันเปลี่ยนความกว้างสูงสุดเป็นขนาดของคอนเทนเนอร์เนื้อหาที่รูปภาพของฉันอยู่ในกรณีนี้คือ: ความกว้างของคอนเทนเนอร์ - ช่องว่างภายใน - ขึ้นเครื่อง = ความกว้างสูงสุด

วิธีนี้รูปภาพของฉันจะไม่แตกออกจาก div ที่มีและฉันยังลอยรูปภาพภายใน div เนื้อหาได้

ฉันได้ทดสอบใน IE 9, FireFox 18.0.2 และ Chrome 25.0.1364.97, Safari iOS และดูเหมือนว่าจะใช้งานได้

เพิ่มเติม: ฉันทดสอบสิ่งนี้กับภาพที่มีความกว้าง 1024px ซึ่งแสดงที่ 678px (ความกว้างสูงสุด) และภาพที่แสดงกว้าง 500px ที่ 500px (ความกว้างของภาพ)

การตั้งค่าความกว้าง 100% คือความกว้างเต็มของ div ที่อยู่ในนั้นไม่ใช่รูปภาพขนาดเต็มดั้งเดิม ไม่มีวิธีใดที่จะทำได้หากไม่มี JavaScript หรือภาษาสคริปต์อื่น ๆ ที่สามารถวัดภาพได้ หากคุณสามารถมีความกว้างคงที่หรือความสูงคงที่ของ div (เช่นกว้าง 200px) ก็ไม่ควรจะยากเกินไปที่จะให้ช่วงเติมรูปภาพ แต่ถ้าคุณใส่รูปภาพ 20x20 พิกเซลในกล่อง 200x300 พิกเซลมันจะยังคงผิดเพี้ยน

ในรูปแบบเส้น - สิ่งนี้ใช้ได้กับฉันทุกครั้ง

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

คุณควรตั้งค่าความกว้างสูงสุดและถ้าคุณต้องการคุณสามารถตั้งค่าช่องว่างภายในด้านใดด้านหนึ่งได้ ในกรณีของฉันความกว้างสูงสุด: 100% ดี แต่ภาพอยู่ถัดจากส่วนท้ายของหน้าจอ

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

ฉันก็ประสบปัญหาเดียวกันเช่นกัน แต่ฉันตั้งค่าความสูงใน CSS ของฉันเป็นอัตโนมัติและนั่นช่วยแก้ปัญหาของฉันได้ นอกจากนี้อย่าลืมทำคุณสมบัติการแสดงผล

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

ฉันพบคำตอบที่เหมาะกับฉันและสามารถพบได้ในลิงค์ต่อไปนี้:

ภาชนะเต็มความกว้างในพ่อแม่ความกว้าง จำกัด

หากภาพมีขนาดเล็กกว่าระดับบนสุด ...

.img_100 {
  width: 100%;
}

ฉันจะใช้ทรัพย์สิน display: table-cell

นี่คือลิงค์