gpt4 book ai didi

html - 如何在 bootstrap 5 中使用卡片制作完美的圆形图像?

转载 作者:行者123 更新时间:2023-12-02 18:22:38 27 4
gpt4 key购买 nike

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

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

我该如何解决这个问题?

最佳答案

您可以使用 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="/image/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>

关于html - 如何在 bootstrap 5 中使用卡片制作完美的圆形图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70662496/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com