Hướng nghệ thuật

Katie Hempenius
Katie Hempenius

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 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.