使用Bootstrap实现两张图片同一行对齐 解决前端图片排版异常问题

问题原因 #

你遇到的布局错位问题由两个错误导致：

• Bootstrap 5 已经弃用旧版本的img-responsive响应式图片类，对应的替代类为img-fluid，你使用的旧类不会生效，图片会保持原始尺寸溢出列容器，导致布局错位
• 栅格系统的.row默认没有设置垂直对齐规则，两个列内的内容高度不同时不会自动对齐

修复方案 #

直接按照下方代码调整即可：

<html>
  <head>
    <meta charset="utf-8">
    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="icon" href="124010.png">
    <title>FacebookMusic</title>
  </head>
  <body>
<div class="container">

  <!-- 给row增加align-items-center实现列内容垂直居中对齐 -->
  <div class="row align-items-center">
    <div class="col">
      <!-- 把img-responsive替换为Bootstrap5对应的响应式图片类img-fluid -->
      <img class="img-fluid" src="dF5SId3UHWd.svg">
    </div>
    <div class="col">
      <img class="img-fluid" src="bg.png">
    </div>
  </div>
</div>
  </body>
</html> 

如果需要让两张图片在各自的列内水平居中，可以给两个.col元素都加上text-center类。

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