2012-01-23 31 views
5

Tôi đang sử dụng css sau để hiển thị một hình ảnh 661px x 343px:Làm một hình ảnh lớn nhỏ sử dụng CSS (Downscaling) kết quả trong hình ảnh mờ trong IE9, FF, nhưng tốt trong Chrome

width: 95px; height:auto; 

Tôi có thấy rằng việc sử dụng CSS sau đây sẽ cung cấp cho các vết mờ cùng trong Chrome:

image-rendering:-webkit-optimize-contrast; 

vì vậy, xóa làm cho trên hình ảnh rõ ràng hơn nhiều trong chrome, bất kỳ ý tưởng làm thế nào để sửa chữa các vấn đề đối với các trình duyệt khác?

Trả lời

5

Thông thường bạn không nên làm điều này, lý do là người dùng sẽ tải xuống hình ảnh lớn hơn.

Hãy tưởng tượng bạn có hình ảnh 2Mb bạn muốn hiển thị trên trang web, người dùng sẽ phải tải xuống tệp 2Mb chỉ để xem hình ảnh nhỏ hơn. Cách tốt nhất là thay đổi kích thước hình ảnh và tạo liên kết hình thu nhỏ.

Đối với vấn đề đó là trình duyệt hiển thị đó là vấn đề, Theo như tôi biết không có thay thế cho điều này.

+0

Các hình ảnh đã được hiển thị trong định dạng lớn hơn trên cùng một trang như hình thu nhỏ, vì vậy tôi nghĩ nó sẽ là tốt hơn để tránh hình ảnh thêm bằng cách sử dụng css. Nhưng tôi đoán đó là giải pháp duy nhất cho vấn đề để thêm các hình ảnh đã thay đổi kích thước. –

+1

Đáng buồn là Lawrence, nhưng sẽ dễ dàng hơn để hiển thị hình thu nhỏ và tiết kiệm băng thông và làm cho trang web nhanh hơn hiển thị hình ảnh lớn, trang web nhanh hơn = xếp hạng công cụ tìm kiếm tốt hơn = hỗ trợ tốt hơn cho điện thoại di động = quản trị viên hệ thống hạnh phúc :) – Neo

+1

Exept rằng có rất nhiều lần khi điều này là mong muốn (để downscale một hình ảnh vào một khu vực nhỏ hơn), và stil không trả lời câu hỏi: làm thế nào để có được hình ảnh downsampled để hiển thị anti-aliased một cách chính xác và không được jaggy hoặc mờ. Và vì anh ấy đã hiển thị hình ảnh lớn hơn trên trang, nên câu trả lời của bạn tệ hơn cho hiệu suất trang cũng phải có ngón tay cái d/l, vì số lượng yêu cầu http mà trình duyệt phải quản lý gấp đôi. – Steve

0

thay đổi kích thước hình ảnh nguồn để chiều rộng và chiều cao đúng, sau đó bạn sẽ không có bất kỳ vấn đề hiển thị nó trên các trình duyệt

Các vấn đề liên quan