求解
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<title>移动端</title>
<style>
img {display: block; max-width: 100%;
}
</style>
</head>
<body>
<img src="img/tour1.jpg" alt="">
</body>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The
img tag is an inline element. Inline elements do not have width and height attributes, so naturally they cannot be set. It needs to be set to block before it can be set. However, the img tag is special. It is also called a replacement element like input. It has its own width and height. It is just for setting the width and height. It is not necessary to change the display to block. It’s just superfluous
Because the img tag is an inline element by default (it seems to be said so), that is, inline, setting the width of the inline element is invalid. After display: block; it is a block-level element. It is only valid if width is set
Why not use flex layout?
No need, just width=100%, that’s fine. The prerequisite is the mobile meta tag
Solving common problems with images---excessive white space at the bottom
Set img to:
display:block;