Tỷ lệ hình ảnh theo tỷ lệ tùy theo kích thước div gốc

Question

Tôi đang sử dụng toàn bộ chiều rộng của trình duyệt jquery blockUI để hiển thị hình ảnh đã chọn từ thư viện. Trên hình ảnh dưới đây là lược đồ xem trong blockUI.
Về cơ bản, xem ở khối bên hông có chiều rộng và chiều cao được đặt thành 100%.
Bên trong có thêm hai div. Phải có chiều rộng được đặt thành 80% chế độ xem và nó chứa hình ảnh.
Hình ảnh có chiều rộng và chiều cao được đặt thành 100% (nhưng điều này là sai tôi biết).
Hình ảnh tôi hiển thị ở đây là hình ảnh ở kích thước gốc do người dùng tải lên. Nhưng nếu màn hình là 1024x768 và hình ảnh được tải lên là 600x1900, tôi không làm gì với hình ảnh đó ra khỏi màn hình.
Vậy làm thế nào tôi có thể sửa lỗi này để hiển thị hình ảnh đó ở giữa và tỷ lệ thuận?

Answer 1

Sử dụng max-width và max-height, bạn sẽ cần phải sử dụng JavaScript trong trình duyệt IE 6 nếu bạn cần hỗ trợ nó:

#blockUI img { 
    max-width: 100%; 
    max-height: 100%; 
} 

này giữ tỉ lệ các img yếu tố khi thay đổi kích thước, lên đến chiều rộng và chiều cao tối đa có thể.