Home >Web Front-end >HTML Tutorial >How to display pictures in html
How to display pictures in html
- 青灯夜游Original
- 2021-10-11 15:52:1732640browse
How to display images in html: 1. Use the img tag with the syntax "
"; 2. Add "background-image:url(image file) to the specified element Address);" style.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
htmlMethods for displaying pictures
Method 1: Use the img tag to insert pictures
In In HTML, you can use the img element to embed an image into a web page.
Please note that technically the 
tag does not insert an image into the web page, but rather links the image from the web page. The tag creates a placeholder for the referenced image.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <img src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" style="max-width:90%" / alt="How to display pictures in html" > </body> </html>
Method 2: Use css background-image attribute
Just add "background-image:url( Picture file address);" style
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
width: 500px;
height: 300px;
background-image: url(img/1.jpg);
background-repeat: no-repeat;
background-size: 400px;
}
</style>
</head>
<body>
<div></div>
</body>
</html> Effect picture:
html video tutorial 》
The above is the detailed content of How to display pictures in html. For more information, please follow other related articles on the PHP Chinese website!