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

Question

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

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

Nhiều người trong số những hình ảnh này là cách rộng hơn div cha mẹ của họ, đó là lý do tôi muốn họ thay đổi kích thước cho phù hợp, nhưng khi một hình ảnh nhỏ bật trong đó và được mở rộng vượt ra ngoài kích thước bình thường của nó, nó thực sự trông khủng khiếp. Có cách nào để làm điều này không?

Answer 1

Chỉ cần chỉ định max-width: 100% một mình, điều đó nên thực hiện.

Answer 2

Đặt chiều rộng 100% là chiều rộng đầy đủ của div nằm trong đó chứ không phải hình ảnh có kích thước đầy đủ gốc. 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 hình ảnh. Nếu bạn 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 được là quá khó để cung cấp cho phạm vi hình ảnh để lấp đầy. Nhưng nếu bạn đặt một hình ảnh 20x20 pixel trong một hộp 200x300 pixel, nó sẽ vẫn bị méo.

Answer 3

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

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

Với trên, chúng tôi đã thay đổi max-width đến kích thước của vùng chứa nội dung mà hình ảnh của tôi là trong Trong trường hợp này đó là: chiều rộng container - đệm - trú = 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ể 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à có vẻ hoạt động.

Bổ sung: Tôi đã thử nghiệm hình ảnh 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à hình ảnh rộng 500px được hiển thị ở 500px (chiều rộng của hình ảnh).

Answer 4

Nếu hình ảnh là nhỏ hơn so với cha mẹ ...

.img_100 { 
    width: 100%; 
} 

Answer 5

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

Đây là link