CODEWITHSUNDEEP
htmlcssflexboxbootstrap-5circleimage
Ferdous Hasan
Ferdous Hasan

Reputation: 68

how can I make the image a proper circle?

Using Bootstrap V5.0 framework, I wanted to make a div with a circle image and some content. I know how to to use a 50% radius to create a circle, but I don’t know how to make the height of the div match the width, so I keep getting an oval shape. I wanted to make the div including image a proper circle with background color. How can I make the height always the same as the width on different display sizes so I get a proper circle?

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

Upvotes: 0

Views: 907

Answers (1)

Rich DeBourke
Rich DeBourke

Reputation: 3423

As you’re using Bootstrap 5, you can use Bootstrap’s ratio helper class to get a proper square and then you can create a proper circle (rather than an oval). The square will keep its ratio as the screen size changes.

A 1x1 ratio is provided as a standard (along with 4x3, 16x9, and 21x9), and while you didn’t specify what exact media object you’re using, you can put a picture in the division (and not just as a background image).

You could also put a video. I created a 640x640 text video and while it starts out small (see the image below), once it starts playing, it expands to fill the space. I also tried embedding a YouTube video, but it always stayed small (to fit within the circle for some reason).

Comparing the starting video image with the ending image

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

There is a background color (green), although it's covered by the image.

Upvotes: 1

Related Questions