在日常的寫html頁面時，原生代碼經(jīng)常性的會引入圖片，我們也經(jīng)常性的會讓圖片寬度等于父盒子寬度的100%，高度自適應(yīng)，但是此時會出現(xiàn)一個問題，圖片下方總有撐開的一小部分，這里我將父盒子背景顏色改成黑色，以便觀察
image.png
修改前的代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
background-color: black;
}
.box>img{
width: 100%;
}
</style>
</head>
<body>
<div class="box"><img src="img.jpg"/></div>
</body>
</html>
此時只需要給圖片添加一個display: block; 屬性就會解決圖片的這個問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
background-color: black;
}
.box>img{
width: 100%;
}
img{
display: block;
}
</style>
</head>
<body>
<div class="box"><img src="img.jpg"/></div>
</body>
</html>
修改后的效果
image.png
