图像设置为 100% 但底部仍有边距
Image set to 100% but still margin at the bottom
我想要一张完全覆盖 div(无内容)的图像。我尝试用背景图像和背景大小来做,但由于没有内容,所以它不起作用。我也不想设置高度,因为那样图像会被拉伸(我希望它能够响应)。所以我试图通过将图像放入 div 并将其设置为 width:100% 和 height:100% 来修复它。它起到了作用(图像根据 div 进行了拉伸)但是我在 img 的底部仍然有一个小边距,我似乎无法将其删除。我将所有边距和填充设置为 0px 但仍然没有结果(甚至 border-sizing 设置为 border-box)。谁能告诉我我做错了什么?我没有设置高度所以,看到其他问题,也许 div (wrapper-1) 没有设置点来适应?这是将图像放入没有内容的 div 的正确方法吗?提前致谢!
HTML:
<div class="row col-12 wrapper-1"><img src="wrapper.jpg" alt="Wrapper"
width="100%" height="100%" /></div>
CSS:
.wrapper-1 {
height: auto;
padding: 0px;
margin: 0px auto;
}
* {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
margin: 0px auto;
padding: 0px;
}
我认为 img
标签的 display: block
可以解决问题。
我想要一张完全覆盖 div(无内容)的图像。我尝试用背景图像和背景大小来做,但由于没有内容,所以它不起作用。我也不想设置高度,因为那样图像会被拉伸(我希望它能够响应)。所以我试图通过将图像放入 div 并将其设置为 width:100% 和 height:100% 来修复它。它起到了作用(图像根据 div 进行了拉伸)但是我在 img 的底部仍然有一个小边距,我似乎无法将其删除。我将所有边距和填充设置为 0px 但仍然没有结果(甚至 border-sizing 设置为 border-box)。谁能告诉我我做错了什么?我没有设置高度所以,看到其他问题,也许 div (wrapper-1) 没有设置点来适应?这是将图像放入没有内容的 div 的正确方法吗?提前致谢!
HTML:
<div class="row col-12 wrapper-1"><img src="wrapper.jpg" alt="Wrapper"
width="100%" height="100%" /></div>
CSS:
.wrapper-1 {
height: auto;
padding: 0px;
margin: 0px auto;
}
* {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
margin: 0px auto;
padding: 0px;
}
我认为 img
标签的 display: block
可以解决问题。