Chỉ định nhiều chiều rộng vùng

Katie Hempenius
Katie Hempenius
X

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 trong các cửa sổ trình duyệt có kích thước khác để xem trình duyệt tải hình ảnh khác nhau và sử dụng các bố cục khác nhau ở các kích thước trình duyệt khác nhau.

Xem mã

  • Thanh toán index.html để biết mã giúp thực hiện việc này:
<img src="flower.jpg"
  srcset="flower-small.jpg 480w, flower-large.jpg 800w"
  sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">

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

Giá trị của thuộc tính sizes cho biết chiều rộng hiển thị của hình ảnh sẽ là: "100% chiều rộng khung nhìn" trên khung nhìn có chiều rộng tối đa 480px, "50% khung nhìn chiều rộng" trên màn hình rộng 481 – 1024px và 800px trên màn hình rộng hơn 1.024px. Các chiều rộng khớp với chiều rộng được chỉ định trong CSS.

Khả năng chỉ định chiều rộng nhiều vị trí cho phù hợp với các bố cục trang sử dụng kiểu khác nhau (tức là chiều rộng hình ảnh) cho các kích thước khung nhìn khác nhau.

Cách chỉ định chiều rộng nhiều vị trí

  • Sử dụng danh sách được phân tách bằng dấu phẩy để chỉ định nhiều chiều rộng vùng. Mỗi mục trong danh sách, ngoại trừ mục cuối cùng, bao gồm một điều kiện về nội dung nghe nhìn (ví dụ: max-width hoặc min-width) và chiều rộng vùng.
  • Mục cuối cùng trong danh sách này là chiều rộng vùng mặc định. Đây là tuỳ chọn mặc định, vì vậy bạn không cần chỉ định điều kiện về nội dung nghe nhìn.
  • Bạn có thể liệt kê bao nhiêu chiều rộng vùng tuỳ thích – số lượng hình ảnh được liệt kê trong srcset không quan trọng.

  • Có thể chỉ định chiều rộng vùng quảng cáo bằng nhiều đơn vị. Sau đây là tất cả độ rộng hợp lệ:

  • 100px

  • 33vw

  • 20em

  • calc(50vw-10px)

Chiều rộng sau đây không hợp lệ:

  • 25% (không thể sử dụng phần trăm với thuộc tính kích thước)