Images Get Stretched on Circle Image - Bootstrap & SCSS - css

Question

PLEASE HELP !!!
I am using bootstrap cards to make a section of my website.I am facing issue in circle image of the cards.I want my images do not get stretch when i put them in image circle of card.Is there a way i can zoom in middle of the image while showing it in circle or am i doing something wrong in my scss code ??
Here is the issue:
Expected Output:
Dimensions of these Images:
910x592 , 1230x802 , 1230x794
Bootstrap Code:
<section class="about-cards-section">
<div class="container">
<div class="row">
<div class="col-sm-4 card-wrapper">
<div class="card card-style" >
<img class="card-img-top rounded-circle circle-image" src="img/about/card-one.png" alt="Card image cap">
<!-- <img src="img/about/card-one.png" class="img-circle" alt="Cinque Terre" width="250" height="236"> -->
<div class="card-body">
<h3 class="card-title">Our Facilities</h3>
<p class="card-text">A short caption detailing an aspect of the brand which is worth mentioning.</p>
</div>
</div>
</div>
<div class="col-sm-4 card-wrapper">
<div class="card card-style">
<img class="card-img-top rounded-circle circle-image" src="img/about/card-two.png" alt="Card image cap">
<div class="card-body">
<h3 class="card-title">Our Research</h3>
<p class="card-text">A short caption detailing an aspect of the brand which is worth mentioning.</p>
</div>
</div>
</div>
<div class="col-sm-4 card-wrapper">
<div class="card card-style">
<img class="card-img-top rounded-circle circle-image" src="img/about/card-three.png" alt="Card image cap">
<div class="card-body">
<h3 class="card-title">Our Expertise</h3>
<p class="card-text">A short caption detailing an aspect of the brand which is worth mentioning.</p>
</div>
</div>
</div>
</div>
</div>
</section>
SCSS of the Cards Section:
.about-cards-section{
.card-wrapper{
margin: 5% 0;
.card-style{
text-align: center;
border-radius: initial;
border: initial;
.circle-image{
width: 60%;
height: 200px;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.card-title{
text-transform: uppercase;
letter-spacing: 1.1px;
}
.card-text{
font-family: MerriweatherRegular;
font-size: 22px;
line-height: initial;
}
}
}

Answer 1

The way I see it, you just need to adjust the width, height of .circle-image class and add object-fit: cover; property. But since you're using Bootstrap we can minimize your css using the pre-defined class in BS4
Example:
.card-wrapper {
margin: 5% 0;
}
/* You can adjust the image size by increasing/decreasing the width, height */
.custom-circle-image {
width: 20vw; /* note i used vw not px for better responsive */
height: 20vw;
}
.custom-circle-image img {
object-fit: cover;
}
.card-title {
letter-spacing: 1.1px;
}
.card-text {
font-family: MerriweatherRegular;
font-size: 22px;
line-height: initial;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="about-cards-section">
<div class="container">
<div class="row">
<div class="col-sm-4 card-wrapper">
<div class="card border-0">
<div class="position-relative rounded-circle overflow-hidden mx-auto custom-circle-image">
<img class="w-100 h-100" src="https://source.unsplash.com/910x592" alt="Card image cap">
</div>
<div class="card-body text-center mt-4">
<h3 class="text-uppercase card-title">Our Facilities</h3>
<p class="card-text">A short caption detailing an aspect of the brand which is worth mentioning.</p>
</div>
</div>
</div>
<div class="col-sm-4 card-wrapper">
<div class="card border-0">
<div class="position-relative rounded-circle overflow-hidden mx-auto custom-circle-image">
<img class="w-100 h-100" src="https://source.unsplash.com/1230x802" alt="Card image cap">
</div>
<div class="card-body text-center mt-4">
<h3 class="text-uppercase card-title">Our Research</h3>
<p class="card-text">A short caption detailing an aspect of the brand which is worth mentioning.</p>
</div>
</div>
</div>
<div class="col-sm-4 card-wrapper">
<div class="card border-0">
<div class="position-relative rounded-circle overflow-hidden mx-auto custom-circle-image">
<img class="w-100 h-100" src="https://source.unsplash.com/1230x794" alt="Card image cap">
</div>
<div class="card-body text-center mt-4">
<h3 class="text-uppercase card-title">Our Expertise</h3>
<p class="card-text">A short caption detailing an aspect of the brand which is worth mentioning.</p>
</div>
</div>
</div>
</div>
</div>
</section>