图像在圆形图像上拉伸 - Bootstrap 和 SCSS

Posted 2023-03-06

【中文标题】图像在圆形图像上拉伸 - Bootstrap 和 SCSS

【英文标题】：Images Get Stretched on Circle Image - Bootstrap & SCSS

【发布时间】：2019-07-26 02:50:55

【问题描述】：

请帮忙！！！

我正在使用引导卡制作我网站的一部分。我在卡片的圆形图像中遇到问题。我希望我的图像在我将它们放入卡片的图像圈时不会被拉伸。有没有办法我可以放大图像的中间同时以圆圈显示还是我在我的 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" >
                      <!-- <img src="img/about/card-one.png" class="img-circle"   >  -->

                    <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" >
                    <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" >
                    <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;

            
        

【问题讨论】：

图片的初始宽度和高度是多少？

在 codepen 中看起来不错：codepen.io/***srelyt/pen/morRqq - 是否有任何其他样式表添加到您的项目中可能导致图像失真？

@awran5 这三张图片的尺寸分别是 910x592 , 1230x802 , 1230x794 ....我想让它通用，这样任何图片都可以集中在中间。

@***srelyt 在我的 css 文件夹中，这些文件包括：style.css、bootstrap.min.css 和在我的 scss 文件夹中有我的项目的一些 scss 文件和一个单独的引导文件夹，其中包含所有引导scss 文件。

@***srelyt 我在 style.scss 中包含了 bootstrap.scss，因为我使用的是 bootstrap 4 的媒体断点

【参考方案1】：

在我看来，你只需要调整.circle-image类的宽度、高度并添加object-fit: cover;属性。但是由于您使用的是 Bootstrap，我们可以使用 BS4 中的预定义类来最小化您的 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" >
          </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" >
          </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" >
          </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>

【讨论】：

感谢您的回答...您的回答帮助我解决了问题。