Изображения растягиваются на круговом изображении - Bootstrap & SCSS

Question

ПОЖАЛУЙСТА, ПОМОГИТЕ !!!

Я использую загрузочные карты, чтобы создать раздел моего веб-сайта. У меня проблема с изображением карточек по кругу. Я хочу, чтобы мои изображения не растягивались при их размещениив круг изображения карты. Есть ли способ я могу увеличить в середине изображения, показывая его по кругу, или я делаю что-то не так в моем коде scss ??

Вот проблема:

Ожидаемый результат:

Размеры этих изображений:

910x592, 1230x802, 1230x794

Код начальной загрузки:

<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 картРаздел:

.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

Как я вижу, вам просто нужно настроить ширину, высоту класса .circle-image и добавить свойство object-fit: cover;.Но так как вы используете Bootstrap, мы можем минимизировать ваш CSS, используя предопределенный класс в BS4

Пример:

.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>