Chiều cao: Auto trong Internet Explorer 8 và dưới

Question

Hướng tới responsive design, Tôi đang sử dụng% s cho hình ảnh, ví dụ .:

#example img { 
    width: 100%; 
    height: auto; 
    max-width: 690px; // Width of the image uploaded. 
} 

này hoạt động tuyệt vời, ngoại trừ trong Internet Explorer 8 và thấp hơn. Đây có phải là do height: auto là một phần của CSS3, chỉ được hỗ trợ bởi IE9 trở đi?

Và phần quan trọng nhất ... bất kỳ đề xuất nào về cách giải quyết vấn đề này? Điều duy nhất tôi có thể nghĩ đến cho đến nay là để cho nó một chiều cao tối đa.

Cảm ơn

Answer 1

Hãy thử điều này:

img { 
    width: inherit; /* Make images fill their parent's space. Solves IE8. */ 
    max-width: 100%; /* Add !important if needed. */ 
    height: auto; /* Add !important if needed. */ 
} 

OR:

img { max-width:100%; height: auto; } /* Enough everywhere except IE8. */ 
@media \0screen {img { width: auto }} /* Prevent height distortion in IE8. */ 

Cả hai giải pháp làm việc. Sự khác biệt là width:inherit làm cho hình ảnh lấp đầy không gian của bố mẹ trong khi width:auto tối đa chúng ở kích thước thực của chúng. Xem fit.css