Hình ảnh thích ứng và định hướng nghệ thuật

Hình ảnh thích ứng thường được triển khai bằng cách sử dụng thuộc tính srcset. Thuộc tính srcset là một danh sách tên tệp hình ảnh được phân tách bằng dấu phẩy và bộ mô tả chiều rộng hoặc mật độ của các tên tệp đó. Để ngăn bố cục thay đổi, hãy đặt các thuộc tính width và height trên thẻ <img> và <source> sử dụng srcset.

Đối với hình ảnh thích ứng sử dụng bộ mô tả mật độ:

• Tất cả hình ảnh trong src và srcset phải có cùng tỷ lệ khung hình.
• Đặt thuộc tính width và height sao cho khớp với kích thước của hình ảnh 1x.
• Thuộc tính src phải tham chiếu đến hình ảnh 1x.

Đối với hình ảnh thích ứng sử dụng chỉ số mô tả chiều rộng:

• Tất cả hình ảnh trong src và srcset phải có cùng tỷ lệ khung hình.
• Đặt các thuộc tính width và height sao cho khớp với kích thước của hình ảnh dự phòng.
• Điều chỉnh kiểu hình ảnh nếu cần: Trong trường hợp không có kiểu CSS nào, việc đặt width và height trên hình ảnh thích ứng sử dụng bộ mô tả chiều rộng sẽ khiến hình ảnh luôn hiển thị ở cùng một kích thước – ngay cả khi hình ảnh liệt kê trong srcset có kích thước khác nhau. Hành vi này có thể không phải là điều bạn muốn. Việc thêm width: 100%; height: auto; hoặc width: 100vw; height: auto; vào kiểu hình ảnh có thể mang lại cho bạn giao diện hình ảnh bạn muốn.

Đối với thẻ <picture>:

• Đặt thuộc tính width và height cho tất cả thẻ <source>: Các giá trị phù hợp cho width và height sẽ tuỳ thuộc vào cách thẻ <source> sử dụng srcset. (Xem ở trên để biết thông tin về cách làm việc với srcset.)
• Điều chỉnh kiểu hình ảnh: Nếu bạn cần điều chỉnh kiểu hình ảnh, hãy lưu ý việc thêm kiểu vào thẻ <source> sẽ không có hiệu lực – thẻ <source> là phần tử trống. Thay vào đó, bạn cần tạo kiểu cho thẻ <img> tương ứng.
• Đặt thuộc tính width và height trên thẻ <img>: Các giá trị này phải khớp với kích thước nội tại của hình ảnh dự phòng.

<!-- Using density descriptors -->
<img width="480" height="330"
    srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
    src="cat-1x.jpg"
    alt="Photo of a cat on a green background">
<!-- Using width descriptors -->    
<img width="256" height="128"
    srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
    src="dog-256w.jpg"
    alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
    <source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
    <source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
    <img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>