CodeGym /Các khóa học /Frontend SELF VI /Hình ảnh đáp ứng

Hình ảnh đáp ứng

Frontend SELF VI

Mức độ , Bài học

Có sẵn

5.1 Thuộc tính srcset

Hình ảnh đáp ứng đóng một vai trò quan trọng trong việc tạo ra các trang web linh hoạt và tối ưu. Nó cho phép tải các hình ảnh với kích thước và độ phân giải khác nhau tùy thuộc vào thiết bị và điều kiện xem, giúp cải thiện hiệu suất và sự tiện lợi. Các công cụ chính để thực hiện hình ảnh đáp ứng trong HTML là các thuộc tính srcset và sizes.

Thuộc tính srcset được sử dụng để chỉ định nhiều nguồn hình ảnh với kích thước hoặc độ phân giải khác nhau. Trình duyệt chọn hình ảnh phù hợp nhất tùy thuộc vào thiết bị của người dùng.

Cú pháp:

    
      <img src="default.jpg" srcset="image1.jpg 1x, image2.jpg 2x" alt="Example Image">

Ở đâu:

src: chỉ đường dẫn đến hình ảnh mặc định
srcset: chứa danh sách các hình ảnh và đặc điểm của chúng, được ngăn cách bằng dấu phẩy
1x, 2x: chỉ ra hệ số phóng to (ví dụ, 1x cho độ phân giải tiêu chuẩn và 2x cho các thiết bị có mật độ điểm ảnh cao)

Ví dụ về cách sử dụng srcset:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Ví dụ về cách sử dụng srcset</title>
        </head>
        <body>
          <img
            src="images/default.jpg"
            srcset="images/image-small.jpg 480w,
              images/image-medium.jpg 800w,
              images/image-large.jpg 1200w"
            alt="Ví dụ hình ảnh đáp ứng">
        </body>
      </html>

Giải thích mã:

src="images/default.jpg": chỉ hình ảnh mặc định
srcset: chứa danh sách các hình ảnh với độ rộng điểm ảnh được chỉ định (480w, 800w, 1200w). Trình duyệt chọn hình ảnh phù hợp nhất dựa vào độ rộng của cửa sổ xem

5.2 Thuộc tính sizes

Thuộc tính sizes được sử dụng kết hợp với srcset để chỉ định độ rộng của hình ảnh trong các điều kiện hiển thị khác nhau. Điều này cho phép trình duyệt chọn hình ảnh phù hợp một cách chính xác hơn.

Cú pháp:

HTML

    
      <img src="default.jpg"
      srcset="image1.jpg 480w, image2.jpg 800w"
      sizes="(max-width: 600px) 480px, 800px"
      alt="Example Image">

Ở đâu:

sizes: chứa danh sách các điều kiện hiển thị và độ rộng hình ảnh tương ứng
(max-width: 600px) 480px: nếu độ rộng cửa sổ xem nhỏ hơn hoặc bằng 600px, sử dụng hình ảnh có độ rộng 480px
800px: trong tất cả các trường hợp khác, sử dụng hình ảnh có độ rộng 800px

Ví dụ về cách sử dụng sizes:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Ví dụ về cách sử dụng sizes</title>
          <style>
            .responsive-img {
              width: 100%;
              max-width: 100%;
              height: auto;
            }
          </style>
        </head>
        <body>
        <img
          class="responsive-img"
          src="images/default.jpg"
          srcset="images/image-small.jpg 480w,
            images/image-medium.jpg 800w,
            images/image-large.jpg 1200w"
          sizes="(max-width: 600px) 480px,
            (max-width: 900px) 800px,
            1200px"
          alt="Ví dụ hình ảnh đáp ứng">
        </body>
      </html>

Giải thích mã:

sizes định nghĩa độ rộng hình ảnh cho các điều kiện hiển thị khác nhau:

Nếu độ rộng cửa sổ xem nhỏ hơn hoặc bằng 600px, sử dụng hình ảnh với độ rộng 480px
Nếu độ rộng cửa sổ xem nhỏ hơn hoặc bằng 900px, sử dụng hình ảnh với độ rộng 800px
Trong tất cả các trường hợp khác, sử dụng hình ảnh với độ rộng 1200px

5.3 Hình ảnh đáp ứng

Hình ảnh đáp ứng cho các kích thước màn hình khác nhau

Chúng ta sẽ tạo một ví dụ, trong đó hình ảnh thích nghi với các kích thước màn hình khác nhau bằng cách sử dụng các thuộc tính srcset và sizes.

Ví dụ:

HTML

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Hình ảnh đáp ứng</title>
          <style>
            .responsive-img {
              width: 100%;
              height: auto;
            }
          </style>
        </head>
        <body>
          <img
            class="responsive-img"
            src="images/default.jpg"
            srcset="images/image-small.jpg 480w,
              images/image-medium.jpg 800w,
              images/image-large.jpg 1200w"
            sizes="(max-width: 600px) 480px,
              (max-width: 900px) 800px,
              1200px"
            alt="Ví dụ hình ảnh đáp ứng">
        </body>
      </html>

Giải thích mã:

src="images/default.jpg": chỉ hình ảnh mặc định
srcset: xác định ba phiên bản của hình ảnh với độ rộng khác nhau (480w, 800w, 1200w)
sizes: định nghĩa độ rộng của hình ảnh cho các điều kiện khác nhau:
- đến 600px — sử dụng hình ảnh với độ rộng 480px
- đến 900px — sử dụng hình ảnh với độ rộng 800px
- trên 900px — sử dụng hình ảnh với độ rộng 1200px
.responsive-img: lớp CSS đặt độ rộng 100% và chiều cao tự động cho hình ảnh, để nó chiếm không gian khả dụng và giữ nguyên tỷ lệ

Trước Bài học trước

Kế tiếp Bài học tiếp theo

Bình luận

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION