Giảm kích thước (nhưng không lên) hình ảnh bằng cách sử dụng CSS để khớp với ngăn chứa div trong IE9 (chiều rộng tối đa: sửa chữa 100%)

Question

Tôi không thể sử dụng JS, chỉ nên lưu trữ CSS này. Vùng chứa (DIV) là phần tử "ô bảng" chiều rộng tự động (linh hoạt).

Tôi muốn chia tỷ lệ hình ảnh chỉ khi chiều rộng lớn hơn vùng chứa (người dùng có thể đổi kích thước cửa sổ - đó là lý do).

Tôi đã sử dụng mã được hiển thị bên dưới nhưng chỉ hoạt động trên IE7.

max-width: 100%; 
height: auto; 
width: auto\9; 

Tôi đã cố gắng tìm mọi cách khắc phục sự cố cho IE9 nhưng không thành công.

Answer 1

max-width nhu cầu của bạn được thiết lập để kích thước hình ảnh và sau đó width-100% như vậy:

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

Tất nhiên, điều này có nghĩa rằng max-width của bạn phải được tự động thiết lập dựa trên các hình ảnh được tải, bao có thể không thực tế.

Answer 2

Tôi tình cờ gặp câu hỏi cũ này trong khi cố gắng thực hiện chính xác điều tương tự mà OP đang thử. Tôi đang trả lời bất cứ ai có thể đến đây. Sau khi kiểm tra http://jsfiddle.net/SAada/2/ đề cập bởi OP, tôi tìm thấy một giải pháp thú vị:

thiết

height: auto; 

sẽ đảm bảo rằng hình ảnh sẽ không được kéo dài/rộng. Đồng thời, thiết lập

max-width: 100% 

sẽ đảm bảo rằng nếu chiều rộng yếu tố phụ huynh là ít hơn chiều rộng hình ảnh, hình ảnh được thu nhỏ lại.

Như vậy, sự kết hợp làm việc cho tôi là:

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

Oh, và sau khi một số tìm kiếm nhiều hơn, tôi phát hiện ra rằng kỹ thuật này cũng được sử dụng bởi Bootstrap cho hình ảnh đáp ứng!