产生空白的原因
img标签是行内块元素即默认是:display: inline-block,且行内块元素的
默认对齐方式是基线对齐即vertical-align: baseline
所以产生空白的原因是因图片底边与容器基线对齐了,留出了基线与底线的空白
解决空白方法
<div class="pic-container">
<img class="pic" src="~images/img1.jpg" alt="">
<img class="pic" src="~images/img2.jpg" alt="">
</div>
1.1:把图片父容器设置为flex布局
.pic-container {
width: 100%;
display: flex;
flex-direction: column;
.pic {
width: 100%;
}
}
1.2:把图片变成块状元素
.pic-container {
.pic {
display: block; //inline-block不可以
width: 100%;
}
}
1.3:设置图片的vertical-align
修改为vertical-align: middle使其相对容器中部对齐即居中对齐,这样图片就会充满整个容器
.pic-container{
.pic{
vertical-align: middle;
width: 100%;
}
}
1.4:把图片父容器行高置为 0
.pic-container {
line-height: 0;
.pic {
width: 100%;
}
}
1.5:把图片父容器文字大小置为 0
.pic-container {
font-size: 0;
.pic {
width: 100%;
}
}