图片设置vertical-align: middle不生效如何解决

vertical-align: middle 仅用于控制行内/行内块元素与同行内其他文本、元素的对齐关系，不具备裁剪图片、控制图片在固定区域内显示位置的作用，因此设置后无法达到预期效果。

通过CSS原生的object-fit属性即可实现竖向图片显示垂直中间区域的需求，无需修改现有HTML结构，直接追加对应样式即可：

• 给轮播项容器.carousel-item设置固定显示高度，数值可根据页面实际设计需求调整
• 给业务图片.business-images设置宽高铺满父容器，搭配裁剪属性自动保留图片垂直居中的显示区域

对应CSS代码如下：

/* 轮播项容器固定高度，可根据自身布局调整数值 */
.carousel-item {
  height: 420px;
}
/* 图片裁剪显示规则 */
.business-images {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

代码属性说明：

• object-fit: cover：会等比缩放图片直到完全铺满容器，不会拉伸变形图片，超出容器范围的部分自动裁剪
• object-position: center：指定裁剪时优先保留图片水平、垂直双方向的中间区域，正好匹配需求

补充提示：现有代码中图片挂载的d-block、w-100为Bootstrap内置工具类，和上述样式无冲突，无需额外移除。如果需要微调图片垂直显示位置，修改object-position属性值即可：需要显示偏上区域设为center top，需要显示偏下区域设为center bottom。

内容的提问来源于stack exchange，提问作者Sabeel Hussain