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

按照我的看法，您只需要调整{ name: 'div' components: [ componentOne: { name: 'div' components: [ { name: 'p', components: [...deeply nested] }, { name: 'h1', components: [...deeply nested] } ] } componentTwo: { name: 'nav', components: [...] } ] }类的宽度和高度并添加.circle-image属性。但是，由于您使用的是Bootstrap，我们可以使用BS4中的预定义类将CSS最小化

示例：

object-fit: cover;

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

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

1 个答案: