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

Question

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

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

我该如何解决这个问题？

- ruhul

---

你能提供图片吗？ - Dhruv

Answer 1

您可以使用 Bootstrap-5 中预定义的类 ratio ratio-1x1，如果您的图像不是 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://istack.dev59.com/fcbpv.webp?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>

- Raeesh Alam

Answer 2

据我所知，rounded-circle类只是border-radius:50%。因此，如果您的图像尺寸不相等（如50 x 50），您将无法得到完美的圆形。

您可以通过为图像设置width和height来固定其尺寸。

例如：

img:{
    width:50px;
    height:50px
   }

或者

<img id="myImage" src=".." >

#myImage{
   width:50px;
   height:50px
}

- Mah Es

Answer 3

创建你的CSS代码并删除Bootstrap圆角类。

<img src="elonMusk.png" class="card-img-top"  alt="elonMusk">

并且在 CSS 文件中

img {
  border-radius: 50%;
}

使用border-radius属性将圆角添加到图像中。50％将使图像变为圆形：

- Pranavjeet.Mishra

Answer 4

在 .css 中：-

    img {
      border-radius: 50%;
    }

如果想了解更多，请访问此链接

- Ankit

Answer 5

设置等高和等宽...

 <img src={elonMusk} class="card-img-top rounded-circle" alt={elonMusk} 
style={{height:"200px", width:"200px"}} />

- Biplab Mahato

Answer 6

只需使用Bootstrap的卡片组件并更新一下代码以实现圆形图片。

Bootstrap卡片组件文档：https://getbootstrap.com/docs/5.1/components/card/

以下代码片段已经更新，希望能对您有所帮助。谢谢。

.card .card-img-top {
  height: 140px;
  width: 140px;
}

<!-- 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">

<div class="card" style="width: 18rem;">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/640px-Image_created_with_a_mobile_phone.png" class="rounded-circle card-img-top mt-3 mx-auto img-thumbnail">
  <div class="card-body">
    <h5 class="card-title">Card title</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">Go somewhere</a>
  </div>
</div>

- Hassan Siddiqui