While browsing through the Bootstrap documentation and searching on stackoverflow, I came across a solution to create circular images using border-radius set at 50%. However, when I tried implementing it with my slightly oversized image, it ended up looking deformed. I then attempted to use Bootstrap as well, but encountered the same issue.
Below is an example of what I attempted:
import React, { Component } from 'react';
import yo from '../../assets/yo.jpg';
import './Card.css';
class Card extends Component {
render() {
return (
<div className="container">
<div className="row vertical-center">
<div className="">
<img src={yo} className="rounded-circle w-25" />
</div>
</div>
</div>
)
}
}
export default Card
; This component belongs to a React project. Here's the corresponding CSS code:
.vertical-center {
min-height: 80vh;
display: flex;
align-items: center;
}
The intention behind this CSS snippet is to vertically center the content within the component.
However, the resulting output was not a circular image as intended:
https://i.sstatic.net/KI3j0.png
This issue persists despite various attempts. How can I rectify this problem using Bootstrap?