How will i make perfect circle image using card in bootstrap 5-CodePudding

In my project, I used bootstrap v.5 cards. I wanted to make the image a perfect circle and I used bootstrap but the output image appears oval in shape. here is my code

 <img src={elonMusk}  alt={elonMusk} />

How do I fix this problem

CodePudding user response：

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
   }

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

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

CodePudding user response：

Create your css code and remove bootstrap rounded class.

<img src="elonMusk.png"   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:

CodePudding user response：

In .css:-


    img {
      border-radius: 50%;
    }

For more follow this link

CodePudding user response：

put equal height and width...

 <img src={elonMusk}  alt={elonMusk} 
style={{height:"200px", width:"200px"}} />

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div >
        <div >
          <img src="https://i.stack.imgur.com/fcbpv.jpg?s=256&g=1"  alt="Raeesh">
        </div>
        <div >
          <h5 >Raeesh Alam</h5>
          <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" >View More</a>
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div  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" >
  <div >
    <h5 >Card title</h5>
    <p >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" >Go somewhere</a>
  </div>
</div>