Trong bất kỳ trình duyệt hiện đại nào, khi bạn truy cập url hình ảnh (ví dụ: http://i.imgur.com/xrM9q.jpg), nó sẽ tự động thay đổi kích thước hình ảnh đó và cung cấp cho bạn tùy chọn "phóng to" bằng một kính lúp nhỏ. Đây không phải là luôn luôn như vậy với một iframe:Thay đổi kích thước hình ảnh IFrame
<iframe src='http://i.imgur.com/xrM9q.jpg'> </iframe>
Nếu bạn liên kết iframe để một hình ảnh, Firefox sẽ cung cấp cho hành vi này đẹp: nó bắt đầu ra hành xử như max-width: 100%; max-height: 100%, sau đó bạn có thể click vào nó để làm cho nó lớn .
Tuy nhiên, trong Chrome, hình ảnh chỉ có kích thước đầy đủ. Thử mở this example trong Chrome và Firefox.
Làm cách nào để Chrome xử lý hình ảnh "thông minh"? Đó là để nói, có hành vi mặc định cho thấy một con trỏ kính lúp và cung cấp tự động thay đổi kích thước?
(Để làm rõ: Tôi muốn tiện ích này hoạt động trong phần mở rộng của Chrome. Giải pháp duy nhất tôi đưa ra cho đến nay là đặt tập lệnh nội dung trên tất cả các trang và thay đổi kiểu dáng theo cách thủ công trên hình ảnh trên trang. sucks, vì vậy tôi hy vọng cho một phương pháp ít hacky và không ảnh hưởng đến mọi trang mà người dùng truy cập)
Bạn có thể thấy rằng đây là một lựa chọn thiết kế của trình duyệt. Tôi không mong đợi để có được loại chức năng zoom trừ khi hình ảnh là thứ duy nhất được tải vào trình duyệt - FireFox dường như đã thêm điều này như là một tính năng "tiền thưởng". –
Ngay cả khi đó là lựa chọn thiết kế, tôi vẫn đang tìm cách giải quyết để có được hành vi hình ảnh "tốt hơn" từ iframe của tôi. – Chuck
Tôi không nghĩ rằng có một cách hợp lý hơn để làm điều đó hơn những gì Joelio mô tả trong câu trả lời của mình. Điều đó, hoặc sử dụng một kịch bản phía máy chủ để tải xuống hình ảnh, thay đổi kích thước và đặt phiên bản đã thay đổi kích thước trên trang web. Sau đó, bạn có thể liên kết một trình xử lý nhấp chuột với hình ảnh, sẽ hiển thị nó ở kích thước đầy đủ và sau đó là phiên bản được thay đổi kích thước trên nhấp chuột thứ hai. Bạn thậm chí có thể sử dụng CSS để thêm một con trỏ đẹp khi di chuột qua hình ảnh. – Kenny806