How will I make perfect circle image using card in bootstrap 5? - html

Question

In my project, I used bootstrap v.5 cards. I wanted to make the image a perfect circle and I used bootstrap class="rounded-circle" but the output image appears oval in shape. here is my code,
<img src={elonMusk} class="card-img-top rounded-circle" alt={elonMusk} />
How do I fix this problem ?

Answer 1

You can use class ratio ratio-1x1 which is pre-defined classes in Bootstrap-5 and if your image is not in Square format then you need to write single line of css code like 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>
View More
</div>
</div>
</div>
</div>
</div>

Answer 2

as far as I know, rounded-circle class is just border-radius:50%. So if your image dimensions are not equal (like 50 x 50). you won't get perfect circle.
You can give your image some width and height to fix it's dimensions.
like :
img:{
width:50px;
height:50px
}
or
<img id="myImage" src=".." >
#myImage{
width:50px;
height:50px
}

Answer 3

Create your css code and remove bootstrap rounded class.
<img src="elonMusk.png" class="card-img-top" alt="elonMusk">
and in css file
img {
border-radius: 50%;
}
Use the border-radius property to add rounded corners to an image. 50% will make the image circular:

Answer 4

In .css:-
img {
border-radius: 50%;
}
For more follow this link

Answer 5

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

Answer 6

Just use card component from Bootstrap and update little code for Circle image.
Bootstrap Card Component Documentation: https://getbootstrap.com/docs/5.1/components/card/
Already updated below code snippet, i hope it'll help you out. Thank You
.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>
Go somewhere
</div>
</div>