Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Specify Image URL for Different Situations in HTML
Use the srcset attribute to specify the URL of the image to use in different situations in HTML.
Example
You can try to run the following code to implement srcset attribute. Resize the browser to see different images loading −
<!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>
Updated on: 2020-03-03T11:25:00+05:30
299 Views
Advertisements