缩放图片后底部出现空白怎么办？

来源：Golang编程网作者：IT小魔仙头衔：程序员

导读：本期聚焦于小伙伴创作的《缩放图片后底部出现空白怎么办？》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《缩放图片后底部出现空白怎么办？》有用，将其分享出去将是对创作者最好的鼓励。

在前端开发中，对图片进行缩放操作后，经常会发现图片容器的底部出现多余的空白区域，这种情况在图片作为行内元素或者行内块元素时会频繁出现，给页面布局带来不必要的麻烦。

缩放图片后底部出现空白怎么办？

问题产生的原因

图片默认属于inline行内元素，或者设置为inline-block行内块元素后，会遵循行内元素的垂直对齐规则。行内元素的默认垂直对齐方式是baseline（基线对齐），而基线的位置并不是行内元素的最底部，这就导致图片的底部和父容器的基线对齐后，父容器下方会留出额外的空白空间。

另外，行内元素会受到父容器的line-height行高属性影响，如果行高数值大于图片的高度，也会在图片上下产生额外的空白空间，缩放图片后这种空白会更明显。

将图片的display属性设置为block块级元素，块级元素不会遵循行内元素的基线对齐规则，自然就不会出现底部空白的问题。

/* 修改图片为块级元素 */
img {
    width: 200px; /* 缩放图片宽度 */
    height: auto; /* 高度自适应保持比例 */
    display: block;
}

如果不想修改图片的显示属性，可以调整图片的vertical-align属性，将其设置为top、middle或者bottom，避免基线对齐带来的空白。

/* 调整垂直对齐方式 */
img {
    width: 200px;
    height: auto;
    vertical-align: bottom; /* 底部对齐，消除空白 */
}

如果空白是由行高导致的，可以将图片父容器的line-height设置为0，这样就不会有多余的行高空间分配给图片周围。

/* 父容器行高设为0 */
.img-wrapper {
    line-height: 0;
}
.img-wrapper img {
    width: 200px;
    height: auto;
}

行高的默认值通常和字体大小相关，将父容器的font-size设置为0，也会间接让行高失效，从而消除图片底部的空白。

/* 父容器字体大小设为0 */
.img-wrapper {
    font-size: 0;
}
.img-wrapper img {
    width: 200px;
    height: auto;
}

如果页面中图片不需要和其他行内元素在同一行排列，优先选择修改display为block的方案，逻辑最简单也不容易引发其他布局问题。如果需要图片和其他行内元素同行排列，可以选择调整vertical-align属性的方案，对整体布局的影响最小。

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。