Home > Article > Web Front-end > How to specify the URL of an image to be used in different situations in HTML?

How to specify the URL of an image to be used in different situations in HTML?

WBOYforward: 2023-08-26 23:21:121109browse

Use the srcset attribute to specify the URL of an image to be used in different situations in HTML.

Example h2>

You can try running the following code to implement the srcset attribute. Resize your browser to see the different images loaded -

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

The above is the detailed content of How to specify the URL of an image to be used in different situations in HTML?. For more information, please follow other related articles on the PHP Chinese website!

html

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Revealing the Depth of Design, Part 1Next article：Revealing the Depth of Design, Part 1

See more

How to specify the URL of an image to be used in different situations in HTML?

Example h2>

Related articles