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 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à mã mô tả chiều rộng hoặc mật độ tương ứng.

Để tránh thay đổi bố cục, hãy đặt thuộc tính width và height trên thẻ <img> và <source> sử dụng srcset.

Mã mô tả mật độ

Cách tạo hình ảnh thích ứng sử dụng chỉ số mô tả mật độ:

• Tất cả hình ảnh được liệt kê 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.

Chỉ số mô tả chiều rộng

Cách tạo 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.
• Các thuộc tính width và height phải 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. Nếu không có CSS, nếu bạn đặt width và height trên hình ảnh thích ứng có bộ mô tả chiều rộng, thì hình ảnh sẽ luôn hiển thị ở kích thước đã đặt đó. Điều này vẫn đúng ngay cả khi các hình ảnh được 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. Hãy thêm width: 100%; height: auto; hoặc width: 100vw; height: auto; vào kiểu hình ảnh để có được giao diện hình ảnh như bạn mong muốn.

Thành phần hình ảnh

Cách tạo phần tử <picture> thích ứng:

• Đặt thuộc tính width và height cho tất cả thẻ <source>. Các giá trị phù hợp cho thuộc tính này phụ thuộc vào cách thẻ <source> sử dụng srcset.
• Điều chỉnh hình ảnh bằng cách tạo kiểu cho thẻ <img> tương ứng. Thẻ <source> là một phần tử trống và do đó, kiểu không ảnh hưởng đến.
• Đặ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.

Ví dụ

HTML

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