Chỉ đạo nghệ thuật

Katie Hempenius
Katie Hempenius
X

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 vào biểu tượng Toàn màn hình toàn màn hình.
  • Tải lại ứng dụng bằng các kích thước trình duyệt khác nhau. Hãy lưu ý sự khác biệt giữa các hình ảnh: không chỉ kích thước mà còn cả cách cắt và tỷ lệ khung hình.

Điều gì đang xảy ra?

Chỉ đạo nghệ thuật cho thấy 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. Hướng dẫn nghệ thuật sẽ tiến xa hơn một bước 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 chỉ đạo nghệ thuật để cải thiện bản trình bày hình ảnh. Ví dụ: các kiểu cắt hình ảnh khác nhau trong bản minh hoạ này đảm bảo rằng điểm quan tâm (hoa) luôn hiển thị chi tiết, bất kể màn hình. Lợi ích của hướng dẫn nghệ thuật chỉ mang tính thẩm mỹ; 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 để xem mã hướng dẫn nghệ thuật cho bản minh hoạ này.

Cách hoạt động của mã

Hướng dẫn nghệ thuật sử dụng các thẻ <picture>, <source> và <img>.

hình ả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>.

source

Thẻ <source> chỉ định một tài nguyên phương tiện.

Trình duyệt sử dụng thẻ <source> đầu tiên có truy vấn nội dung nghe nhìn trả về giá trị true. Nếu không có truy vấn nội dung đa phương tiện nào khớp, 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 hỗ trợ thẻ <picture>.

Nếu không hỗ trợ thẻ <picture>, trình duyệt sẽ tải hình ảnh do thẻ <img> chỉ định.