Hãy xem thử bản minh hoạ này
- Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó nhấn
Toàn màn hình
. - Tải lại ứng dụng bằng nhiều kích thước trình duyệt. Chú ý đến sự khác biệt của các hình ảnh là: chúng không chỉ có kích thước khác nhau mà còn có cách cắt xén khác nhau và tỷ lệ khung hình.
Điều gì đang xảy ra ở đây?
Chỉ dẫn nghệ thuật hiển thị các hình ảnh khác nhau trên các kích thước màn hình khác nhau.
Hình ảnh thích ứng sẽ tải nhiều kích thước của cùng một hình ảnh. Chỉ đạo nghệ thuật và tải các hình ảnh hoàn toàn khác nhau tuỳ thuộc vào màn hình.
Sử dụng hướng nghệ thuật để cải thiện cách trình bày hình ảnh. Ví dụ: các lựa chọn khác nhau việc cắt xén hình ảnh trong bản minh hoạ này đảm bảo rằng địa điểm yêu thích (hoa) luôn được hiển thị chi tiết, bất kể màn hình. Các lợi ích của chỉ dẫn nghệ thuật là thuần tuý về tính thẩm mỹ; nên nó không mang lại lợi ích về hiệu suất so với hình ảnh thích ứng.
Xem mã
- Xem
index.htmlđể biết mã hướng dẫn nghệ thuật cho bản minh hoạ này.
Cách mã hoạt động
Hướng nghệ thuật sử dụng
<picture>!
<source>,
và <img>.
ảnh
Thẻ <picture> cung cấp một trình bao bọc cho 0 hoặc nhiều thẻ <source> và một thẻ <image>.
nguồn
Thẻ <source> chỉ định một tài nguyên nội dung nghe nhìn.
Trình duyệt sử dụng thẻ <source> đầu tiên với một truy vấn nội dung nghe nhìn
trả về giá trị true. Nếu không có truy vấn phương tiện nào phù hợp, thì
trình duyệt sẽ quay lại tải hình ảnh do <img> chỉ định.
.
img
Thẻ <img> giúp mã này hoạt động trên các trình duyệt không
có hỗ trợ thẻ <picture>.
Nếu trình duyệt không hỗ trợ thẻ <picture>, thì trình duyệt sẽ tải
hình ảnh do thẻ <img> chỉ định.