在日常的寫html頁(yè)面時(shí)，原生代碼經(jīng)常性的會(huì)引入圖片，我們也經(jīng)常性的會(huì)讓圖片寬度等于父盒子寬度的100%，高度自適應(yīng)，但是此時(shí)會(huì)出現(xiàn)一個(gè)問題，圖片下方總有撐開的一小部分，這里我將父盒子背景顏色改成黑色，以便觀察
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>
此時(shí)只需要給圖片添加一個(gè)display: block; 屬性就會(huì)解決圖片的這個(gè)問題
<!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
