Tạo chiều rộng hình ảnh 100% của div cha, nhưng không lớn hơn chiều rộng của chính nó

Tôi đang cố gắng để hình ảnh (được đặt động, không bị giới hạn về kích thước) rộng bằng div gốc của nó, nhưng chỉ khi chiều rộng đó không rộng hơn chiều rộng của chính nó ở mức 100%. Tôi đã thử điều này, nhưng không có kết quả:

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

Nhiều hình ảnh trong số này rộng hơn so với div cha mẹ của chúng, đó là lý do tại sao tôi muốn thay đổi kích thước cho phù hợp, nhưng khi một hình ảnh nhỏ xuất hiện ở đó và được thu nhỏ hơn kích thước bình thường, nó thực sự trông rất tệ. Có cách nào để làm điều này?

Chỉ cần xác định max-width: 100%một mình, nên làm điều đó.

Tìm thấy bài đăng này trên một tìm kiếm Google và nó đã giải quyết vấn đề của tôi nhờ trả lời @jwal, nhưng tôi đã thực hiện một bổ sung cho giải pháp của mình.

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

Với cách trên, tôi đã thay đổi chiều rộng tối đa thành kích thước của vùng chứa nội dung mà hình ảnh của tôi đang ở. Trong trường hợp này là: chiều rộng vùng chứa - phần đệm - tấm ván = chiều rộng tối đa

Bằng cách này, hình ảnh của tôi sẽ không thoát ra khỏi div chứa và tôi vẫn có thể làm nổi hình ảnh trong div nội dung.

Tôi đã thử nghiệm trong IE 9, FireFox 18.0.2 và Chrome 25.0.1364.97, Safari iOS và dường như hoạt động.

Bổ sung: Tôi đã thử nghiệm điều này trên một hình ảnh rộng 1024px được hiển thị ở 678px (chiều rộng tối đa) và một hình ảnh rộng 500px được hiển thị ở 500px (chiều rộng của hình ảnh).

Đặt chiều rộng 100% là chiều rộng đầy đủ của div, không phải hình ảnh có kích thước đầy đủ ban đầu. Không có cách nào để làm điều đó mà không có JavaScript hoặc một số ngôn ngữ kịch bản khác có thể đo lường hình ảnh. Nếu bạn có thể có chiều rộng cố định hoặc chiều cao cố định của div (như chiều rộng 200px) thì không quá khó để cung cấp cho hình ảnh một phạm vi để lấp đầy. Nhưng nếu bạn đặt hình ảnh 20x20 pixel vào hộp 200x300 pixel thì nó vẫn sẽ bị biến dạng.

Trong phong cách dòng - điều này làm việc cho tôi mọi lúc

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

Bạn nên đặt chiều rộng tối đa và nếu bạn muốn, bạn cũng có thể đặt một số phần đệm ở một trong các cạnh. Trong trường hợp của tôi, độ rộng tối đa: 100% là tốt nhưng hình ảnh nằm ngay cạnh cuối màn hình.

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

Tôi cũng gặp vấn đề tương tự, nhưng tôi đã đặt giá trị chiều cao trong CSS của mình thành tự động và điều đó đã khắc phục vấn đề của tôi. Ngoài ra, đừng quên làm thuộc tính hiển thị.

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

Tôi tìm thấy một câu trả lời phù hợp với tôi và có thể được tìm thấy trong liên kết sau:

Container chiều rộng đầy đủ trong cha mẹ chiều rộng hạn chế

Nếu hình ảnh nhỏ hơn cha mẹ ...

.img_100 {
  width: 100%;
}

Tôi sẽ sử dụng tài sản display: table-cell

Đây là liên kết