图像在圆形图像上被拉伸 - Bootstrap & SCSS

Question

请帮忙！！！

我正在使用 bootstrap 卡片来制作我的 website.I 的一部分 cards.I 我希望我的图像在放入时不会拉伸card.Is 的图像圈有一种方法可以放大图像的中间部分，同时在圆圈中显示它，还是我在 scss 代码中做错了什么？？

这里是问题所在：

预期输出：

这些图片的尺寸：

910x592、1230x802、1230x794

Bootstrap代码：

<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 class 的宽度，高度并添加 object-fit: cover; 属性。但是由于您使用的是 Bootstrap，我们可以使用 BS4

中预定义的 class 来最小化您的 css

示例：

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

图像在圆形图像上被拉伸 - Bootstrap & SCSS

Images Get Stretched on Circle Image - Bootstrap & SCSS

css

sass

responsive-design

responsive-images

bootstrap-4