Bootstrap 4卡-保留卡内的图像位置，同时保持图像响应性

pbpqsu0x 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(1)|浏览(315)

我有一行引导卡，我已向其中添加了附加图像（由红色箭头指示）。我希望在保持所有图像响应的同时，保持附加图像相对于.card-img-top的位置。当调整浏览器大小时，附加图像最终会覆盖. card-img.top图像，这是我不希望的。以下是我希望保持的图像位置：

这可以用Bootstrap的工具类或额外的CSS来完成吗？任何指导都非常感谢.
Codepen的链接是：here代码段如下：

/* Cards */

.card {
  border-radius: 1% !important;
  border: 1px solid rgba(0, 0, 0, .150);
}

.card-title {
  color: #000;
  font-weight: 700;
}

.card-date {
  font-size: 1.2rem;
  font-weight: 700;
  color: #000;
}

.prod-img {
  margin-top: -150px;
  margin-bottom: 10px;
}

.product-img .prod-img img {
  width: 250px;
  height: 250px;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 10%;
}

.card-text {
  font-size: 1.2rem;
}

.card-footer {
  padding: .75rem 1.25rem;
  background-color: rgba(0, 0, 0, .001);
  border-top: 1px solid rgba(0, 0, 0, .125);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet"/>
 <section class="card-list mb-3">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4 d-flex align-items-stretch pb-3">
                <div class="card shadow bg-white">
                    <div class="card-img-top"><img src="https://placebear.com/960/540" class="d-block mx-auto card-img img-fluid" alt=""></div>
                    <div class="card-body product-img">
                      <div class="product-profile-img">
                      <div class="prod-img"><img src="https://placebear.com/400/456" class="d-block mx-auto img-fluid img-thumbnail" alt=""></div>
                      </div>
                      <h4 class="card-title">Lorem ipsum dolor sit amet.</h4>
                      <h5 class="card-date">Lorem ipsum dolor sit.</h5>
                      <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem quis sequi ab cum a in ea, voluptas, itaque distinctio doloremque eum. Provident mollitia eveniet minima?</p>
                      <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus dignissimos recusandae asperiores sequi nihil?</p>
                  </div>
                 <div class="card-footer">
                    <a href="#" target="_blank" rel="noopener" class="btn btn-primary">Learn More</a> 
                 </div>
                </div>
            </div>
            <div class="col-md-4 d-flex align-items-stretch pb-3">
                <div class="card shadow bg-white">
                    <div class="card-img-top"><img src="https://placebear.com/960/540" class="d-block mx-auto card-img img-fluid" alt=""></div>
                    <div class="card-body product-img">
                      <div class="product-profile-img">
                      <div class="prod-img"><img src="https://placebear.com/400/456" class="d-block mx-auto img-fluid img-thumbnail" alt=""></div>
                      </div>
                      <h4 class="card-title">Lorem ipsum dolor sit amet.</h4>
                      <h5 class="card-date">Lorem ipsum dolor sit.</h5>
                      <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem quis sequi ab cum a in ea, voluptas, itaque distinctio doloremque eum. Provident mollitia eveniet minima?</p>
                      <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus dignissimos recusandae asperiores sequi nihil?</p>
                  </div>
                 <div class="card-footer">
                    <a href="#" target="_blank" rel="noopener" class="btn btn-primary">Learn More</a> 
                 </div>
                </div>
            </div>
            <div class="col-md-4 d-flex align-items-stretch pb-3">
                <div class="card shadow bg-white">
                    <div class="card-img-top"><img src="https://placebear.com/960/540" class="d-block mx-auto card-img img-fluid" alt=""></div>
                    <div class="card-body product-img">
                      <div class="product-profile-img">
                      <div class="prod-img"><img src="https://placebear.com/400/456" class="d-block mx-auto img-fluid img-thumbnail" alt=""></div>
                      </div>
                      <h4 class="card-title">Lorem ipsum dolor sit amet.</h4>
                      <h5 class="card-date">Lorem ipsum dolor sit.</h5>
                      <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem quis sequi ab cum a in ea, voluptas, itaque distinctio doloremque eum. Provident mollitia eveniet minima?</p>
                      <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus dignissimos recusandae asperiores sequi nihil?</p>
                  </div>
                 <div class="card-footer">
                    <a href="#" target="_blank" rel="noopener" class="btn btn-primary">Learn More</a> 
                 </div>
                </div>
            </div>
        </div>
    </div>
   </section>

twitter-bootstrap

来源：https://stackoverflow.com/questions/73489540/bootstrap-4-cards-preserve-image-positions-within-the-card-while-maintaining-i

1条答案

按热度按时间

bn31dyow1#

我认为我们必须做一些事情。你可能需要调整它，并可能应用媒体查询的大小和位置的边缘情况。
首先，使插入图像呈正方形。一致性是至关重要的。我们可以使用padding-bottom技巧（纵横比为100%）和object-fit来做到这一点。注意，我已经将img-thumbnail类移到父元素中以允许这样做。
然后，需要结合百分比和卡片中其他位置存在的固定间距来调整大小。我们可以使用calc()函数来完成此操作。我已经将其应用于上一步中创建的绝对定位 Package 器。
这种布局的主要缺点是它依赖于主卡映像。当它们加载时（或者加载失败时），所有内容都会崩溃。这通常不是问题，但现在却出现了。您可以使用相同的padding-bottom技术来研究强制卡映像容器的大小。
注意，我把你的专栏搞得一团糟。

.product-profile-img {
  margin-top: calc(-50% - 1.25rem);
  height: 0;
  padding-bottom: 100%;
  position: relative;
}

.prod-img {
  position: absolute;
  top: calc(10% + 1.25rem);
  right: calc(10% + 1.25rem);
  bottom: calc(10% + 1.25rem);
  left: calc(10% + 1.25rem);
}

.prod-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card {
  border-radius: 1% !important;
  border: 1px solid rgba(0, 0, 0, .150);
}

.card-title {
  color: #000;
  font-weight: 700;
}

.card-date {
  font-size: 1.2rem;
  font-weight: 700;
  color: #000;
}

.card-text {
  font-size: 1.2rem;
}

.card-footer {
  padding: .75rem 1.25rem;
  background-color: rgba(0, 0, 0, .001);
  border-top: 1px solid rgba(0, 0, 0, .125);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet" />

<section class="card-list my-3">
  <div class="container-fluid">
    <div class="row">
      <div class="col-6 col-md-4 d-flex align-items-stretch pb-3">
        <div class="card shadow bg-white">
          <div class="card-img-top"><img src="https://placebear.com/960/540" class="d-block mx-auto card-img img-fluid" alt=""></div>

          <div class="card-body product-img">
            <div class="product-profile-img">
              <div class="prod-img img-thumbnail">
                <img src="https://placebear.com/400/456" alt="">
              </div>
            </div>

            <h4 class="card-title">Lorem ipsum dolor sit amet.</h4>
            <h5 class="card-date">Lorem ipsum dolor sit.</h5>

            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem quis sequi ab cum a in ea, voluptas, itaque distinctio doloremque eum. Provident mollitia eveniet minima?</p>
            <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus dignissimos recusandae asperiores sequi nihil?</p>
          </div>

          <div class="card-footer">
            <a href="#" target="_blank" rel="noopener" class="btn btn-primary">Learn More</a>
          </div>
        </div>
      </div>

      <div class="col-6 col-md-4 d-flex align-items-stretch pb-3">
        <div class="card shadow bg-white">
          <div class="card-img-top"><img src="https://placebear.com/960/540" class="d-block mx-auto card-img img-fluid" alt=""></div>

          <div class="card-body product-img">
            <div class="product-profile-img">
              <div class="prod-img img-thumbnail">
                <img src="https://placebear.com/400/456" alt="">
              </div>
            </div>

            <h4 class="card-title">Lorem ipsum dolor sit amet.</h4>
            <h5 class="card-date">Lorem ipsum dolor sit.</h5>

            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem quis sequi ab cum a in ea, voluptas, itaque distinctio doloremque eum. Provident mollitia eveniet minima?</p>
            <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus dignissimos recusandae asperiores sequi nihil?</p>
          </div>

          <div class="card-footer">
            <a href="#" target="_blank" rel="noopener" class="btn btn-primary">Learn More</a>
          </div>
        </div>
      </div>

      <div class="col-6 col-md-4 d-flex align-items-stretch pb-3">
        <div class="card shadow bg-white">
          <div class="card-img-top"><img src="https://placebear.com/960/540" class="d-block mx-auto card-img img-fluid" alt=""></div>

          <div class="card-body product-img">
            <div class="product-profile-img">
              <div class="prod-img img-thumbnail">
                <img src="https://placebear.com/400/456" alt="">
              </div>
            </div>

            <h4 class="card-title">Lorem ipsum dolor sit amet.</h4>
            <h5 class="card-date">Lorem ipsum dolor sit.</h5>

            <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem quis sequi ab cum a in ea, voluptas, itaque distinctio doloremque eum. Provident mollitia eveniet minima?</p>
            <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus dignissimos recusandae asperiores sequi nihil?</p>
          </div>

          <div class="card-footer">
            <a href="#" target="_blank" rel="noopener" class="btn btn-primary">Learn More</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

赞(0）回复(0）举报 2022-12-16

我来回答

Bootstrap 4卡-保留卡内的图像位置，同时保持图像响应性

1条答案

相关问题

热门标签

最新问答