Computer >> Máy Tính >  >> Lập trình >> HTML

Làm cách nào để chỉ định URL của hình ảnh để sử dụng trong các trường hợp khác nhau trong HTML?


Sử dụng srcset để chỉ định URL của hình ảnh để sử dụng trong các trường hợp khác nhau trong HTML.

Ví dụ

Bạn có thể thử chạy mã sau để triển khai srcset thuộc tính. Thay đổi kích thước trình duyệt để xem các hình ảnh khác nhau đang tải -

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content="width=device-width, initial-scale = 1.0">
   </head>
   <body>
      <picture>
         <source media = "(min-width: 550px)" srcset = "https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg">
         <source media = "(min-width: 400px)" srcset = "https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg">
         <img src = "https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg" alt = "Tutorials Library" style = "width:auto;">
      </picture>
   </body>
</html>