Images Get Stretched on Circle Image - Bootstrap & SCSS

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;

            }
        }
}

It looks fine in a codepen: https://codepen.io/brooksrelyt/pen/morRqq - Are there any other stylesheet added to your project that could be causing the images to distort? — brooksrelyt, Mar 04 '19 at 20:40
@awran5 the dimensions of these three images are 910x592 , 1230x802 , 1230x794....I want to make it generic so any image can stay focus on middle. — MA-2016, Mar 04 '19 at 20:48
@brooksrelyt In my css folder these files are included : style.css , bootstrap.min.css and In my scss folder there is some scss files of my project and a separate bootstrap folder which contain all bootstrap's scss files. — MA-2016, Mar 04 '19 at 20:52
@brooksrelyt I have included bootstrap.scss in style.scss because i am using media-breakpoints of bootstrap 4 — MA-2016, Mar 04 '19 at 21:11
I guess just be sure your styles come after the default bootstrap scss — brooksrelyt, Mar 04 '19 at 21:14
@brooksrelyt not sure what i am missing..Bootstrap scss is imported like this in style.scss atimport "bootstrap/scss/bootstrap.scss"; — MA-2016, Mar 04 '19 at 21:20
What does your styles.scss file look like? are you adding your styles directly into it or do you have a separate file being imported in? — brooksrelyt, Mar 04 '19 at 21:22
@brooksrelyt i have separate scss file for every page then i am importing all pages scss in main scss which is style.scss — MA-2016, Mar 04 '19 at 21:23

score 6 · Accepted Answer · answered Mar 05 '19 at 09:33

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>

Thanks for the answer...your answer helped me in resolving the issue. — MA-2016, Mar 06 '19 at 12:59

Images Get Stretched on Circle Image - Bootstrap & SCSS

1 Answers1