如何在 Bootstrap 5 中使用卡片制作完美的圆形图像？

Question

在我的项目中，我使用了 bootstrap v.5 卡。我想让图像成为一个完美的圆形，我使用了 bootstrap class="rounded-circle" 但输出图像的形状呈椭圆形。这是我的代码，

 <img src={elonMusk} class="card-img-top rounded-circle" alt={elonMusk} />

我该如何解决这个问题？

Answer 1

您可以使用ratio ratio-1x1预先定义的类Bootstrap-5，如果您的图像不是Square格式的，那么您需要编写单行 css 代码，例如object-fit: cover。

.img-cover{
  object-fit: cover;
  object-position: center;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container py-4">
  <div class="row g-4 row-cols-1 row-cols-sm-2 row-cols-md-3">
    <div class="col">
      <div class="card">
        <div class="ratio ratio-1x1 rounded-circle overflow-hidden">
          <img src="https://i.stack.imgur.com/fcbpv.jpg?s=256&g=1" class="card-img-top img-cover" alt="Raeesh">
        </div>
        <div class="card-body">
          <h5 class="card-title">Raeesh Alam</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">View More</a>
        </div>
      </div>
    </div>
  </div>
</div>