home
play_circle_filled
menu
cached
settings_brightness
Run
×
Change Orientation
Change Theme, Dark/Light
<!DOCTYPE html> <html> <head> <title>HTML Picture Tag Example</title> <meta charset="utf-8" /> <style> .topic { border: 1px solid #d1d1d1; background: #e5e5e526; padding: 0px 0px 10px 0px; text-align: center; align-content: center; } </style> </head> <body> <div class="topic"> <h3>HTML picture element example</h3> <p></p> </div> <p>Resize the browser window to load different images.</p> <picture> <source media="(min-width:650px)" srcset="resources/images/html_images_mountain01.png"> <source media="(min-width:565px)" srcset="./resources/images/html_images_mountain02.png"> <source media="(min-width:465px)" srcset="resources/images/html_images_mountain03.png"> <img src="./resources/images/html_images_mountain04.png" alt="Mountain" style="width:auto;"> </picture> </body> </html>