The picture tag in HTML
The picture tag allows programmers more flexibility in image processing.
The most common use of the picture tag is in responsive website design. Instead of using just one image to zoom in and out depending on the display screen size, multiple images with different sizes will be selected to display depending on the screen size making it look good. than.
The picture tag contains two different types of tags: an img tag and one or more source tags.
The source tag has the following attributes:
- srcset(request) – defines the URL of the image to display.
- media – accepts any valid media queries normally defined in CSS.
- sizes – determines the size of the displayed image.
- Type – defines the file type.
The browser will use the attribute values to load the most appropriate image. The first source tag that matches the attribute will be used.
The img tag will be the last child tag in the picture tag. When there are no matching source tags, the img tag will be used for display.
Using
Example : In this example, I will use the picture tag in combination with the source and img tags to create a responsive page that displays on multiple screen sizes.
You prepare 3 images black.jpg, yellow.jpg and blue.jpg located at the same level with the html file with the following content:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>Học html miễn phí tại web888.vn</h1> <picture> <source media="(min-width: 800px)" srcset="black.jpg"> <source media="(min-width: 600px)" srcset="blue.jpg"> <img src="yellow.jpg" alt="Flowers" style="width:auto;"> </picture> </body> </html>Resize the browser window, you will see the image change in size.
