如何使图像成为正确的圆圈？

Question

使用 Bootstrap V5.0 框架，我想制作一个带有圆形图像和一些内容的 div。我知道如何使用 50% 的半径来创建一个圆，但我不知道如何使 div 的高度与宽度相匹配，所以我一直得到一个椭圆形。我想让包含图像的 div 成为具有背景颜色的适当圆圈。如何在不同的显示尺寸上使高度始终与宽度相同，以便获得正确的圆圈？

 <div class="col-4 py-4">
     <div class="d-flex">
         <div style="border-radius: 50%;" class="flex-shrink bg-dark p-3">
             <img class="img-fluid" src="assets/img/icons/quick_setup-sm.png" alt=""/>
         </div>
         <div class="flex-grow">
             <h6 class="text-uppercase fw-bold">quick setup</h6>
             <p>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
         </div>
     </div>
 </div>

Answer 1

当您使用 Bootstrap 5 时，您可以使用 Bootstrap 的 ratio helper 类来获得一个合适的正方形，然后您可以创建一个合适的圆（而不是椭圆）。随着屏幕尺寸的变化，正方形将保持其比例。

提供 1x1 比例作为标准（以及 4x3、16x9 和 21x9），虽然您没有指定您使用的确切媒体对象，但您可以将图片放在分区中（而不仅仅是作为背景图片）。

你也可以放一个视频。我创建了一个 640x640 的文本视频，虽然它开始时很小（见下图），但一旦开始播放，它就会扩展以填充空间。我也尝试嵌入一个 YouTube 视频，但它总是很小（出于某种原因适合圈内）。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-7 col-sm-5 col-md-4 col-lg-3">
            <div class="ratio ratio-1x1 bg-success overflow-hidden border border-primary border-2" style="border-radius: 50%;">
                <img src="https://via.placeholder.com/400x400.png">
            </div>
        </div>
        <div class="col-4 col-sm-3 col-lg-2">
            <h6 class="text-uppercase fw-bold">quick setup</h6>
            <p>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
        </div>
    </div>
</div>

有一种背景颜色（绿色），虽然它被图像覆盖了。