Bootstrap 5 rounded-circle类失效 图片无法显示圆形样式求助

使用Bootstrap 5开发网站的用户评价卡片模块时，为图片添加rounded-circle类后未生效，图片未呈现圆形样式。

当前效果：

预期效果：

相关代码 #

Index.html #

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Your awesome title: </title>

<meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />

<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="./index.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/_bridgetown/static/js/main.96ffffaea92690057bfb.js" defer></script>
  </head>
  <body>
    <!-- OUR CLIENTS SECTION START -->
<section class="bg-dark text-center">
    <div class="container">
      <div class="row text-white py-5">
        <h2 class="display-6">100's of Companies have Switched to Our Company</h2>
        <div class="col-12">
          <div class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
              <div class="carousel-item active">
                <div class="row">
                  <div class="col-lg-4">
                    <div class="card bg-light text-dark">
                      <img src="./assets/favicon-Icon Only [G]_76x76.png" class="img-fluid rounded-circle mt-4" />
                      <div class="card-body">
                        <p class="lead text-center text-muted mt-4">John Doe</p>
                        <p>Sit occaecat amet aute duis occaecat irure ea. Nostrud minim aliqua esse amet. Culpa laborum voluptate culpa excepteur in in ullamco velit aliqua.

                        </p>
                        <p class="text-warning">
                          <i class="fa-solid fa-star fa-1x"></i>
                          <i class="fa-solid fa-star fa-1x"></i>
                          <i class="fa-solid fa-star fa-1x"></i>
                          <i class="fa-solid fa-star fa-1x"></i>
                          <i class="fa-solid fa-star fa-1x"></i>

                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- OUR CLIENTS SECTION CLOSE -->
  </body>
</html>

Index.css #

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
    background: #f1f2fa;
    font-family: 'Poppins', sans-serif;
}

hr {
    border: 1.5px solid #0b5ed7
}

.crd {
    background: #f1f2fa;
    transition: all;
}

.crd:hover {
    background: #0b5ed7;
    color: #fff;
    transition: 0.5s;
}

.card img {
    margin: auto;
}

核心原因 #

rounded-circle生效的前提是元素宽高相等，当前仅用img-fluid会让图片自适应容器宽度，若图片本身比例不是正方形，就无法形成正圆形。

具体解决方法 #

方法1：用Bootstrap类快速设置等宽高 #

直接给图片添加Bootstrap尺寸类，确保宽高一致：

<img src="./assets/favicon-Icon Only [G]_76x76.png" class="rounded-circle mt-4 w-25" />

或者指定固定像素：

<img src="./assets/favicon-Icon Only [G]_76x76.png" class="rounded-circle mt-4" style="width: 80px; height: 80px;" />

方法2：自定义CSS强制等宽高并优化显示 #

在index.css中添加以下样式，既保证宽高一致，又避免图片拉伸变形：

.card img.rounded-circle {
    width: 80px;
    height: 80px;
    object-fit: cover; /* 裁剪图片适配圆形容器 */
}

额外提示 #

确保自定义CSS文件index.css在Bootstrap CSS之后加载，这样自定义样式能正常覆盖默认规则，避免冲突。

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