解决图片占据整张页面时出现的滚动底部留白问题

最新推荐文章于 2023-02-20 20:19:59 发布

肖大爷的救赎

最新推荐文章于 2023-02-20 20:19:59 发布

阅读量638

点赞数

分类专栏：前端笔记文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_39417580/article/details/113558725

版权

1 篇文章 0 订阅

订阅专栏

问题描述：
在这里插入图片描述

问题出现原因：
在这里插入图片描述

  图片会默认与基线对齐，而将基线与底线之间区域的地方空出来，没有填充。

相关知识：

行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。
行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。

从上到下四条线分别是顶线、中线、基线、底线。我们知道display=inline的元素的vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。
vertical-align该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

这也就是为什么我们有时会看到图片下方会有一片留白的地方，就是因为它默认与基线对齐，而将基线与底线之间区域的地方空出来，没有填充。

解决方案：

给图片img标签设置display：block
定义图片img标签vertical-align的值（可以是top，middle，bottom，视情况而定）
定义容器里的字体大小font-size为0。
改变父对象的属性
如果父对象的高宽固定，图片大小随父对象而定，则可以设置父对象：overflow:hidden;

top 和 bottom 之间的值即为 line-height。假如把 line-height 设置为0，那么 baseline 与 bottom 之间的距离也变为0，那道空白也就不见了。如果没有设置 line-height，line-height 的默认值是基于 font-size 的，视渲染引擎有所不同，但一般是乘以一个系数。因此，在没有设置 line-height 的情况下把 font-size 设为0也可以达到同样的效果。当然，这样做的后果就是不能图文混排了。

关注