Question

我需要创建一个响应式方形图像，我从这里遵循了不同的答案，但有些事情正在发生。我可以看到我的方形 DIV（因为它有黑色背景），但是进入其中的图像不在方形中，就像由于某种原因被偏移了，我不知道为什么。

最好在 Codepen 中查看我的整个代码。

/* Cards */

.card-main-container {
  margin-top: 20px;
}

.card-wrapper {
  margin-bottom: 20px;
}

.card-img-square {
  float: left;
  position: relative;
  width: 30%;
  padding-bottom: 30%;
  margin: 1.66%;
  overflow: hidden;
}

.card-img-square img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  margin: 0 auto;
  position: absolute;
}

.card-information-container {
  background-color: $white;
  padding-bottom: 20px;
  padding-top: 6px;
}

.card-region-commune {
  line-height: 1.4em;
  color: $disclaimer;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 34px;
  margin-bottom: 5px;
}

.card-category {
  font-size: 0.8em;
  font-weight: normal;
  color: $placeholder;
  margin-top: 10px;
  margin-bottom: 5px;
}

.card-title {
  margin-bottom: 10px;
  color: $secondary-color;
}

.card-description {
  color: $secondary-color;
  font-size: 0.9em;
  margin-top: 10px;
}

.card-category,
.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-description {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 42px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<div class="col card-wrapper">
  <div class="col-12">
    <div class="row">
      <div class="col card-information-container">
        <div class="row">
          <div class="col card-img-square">
            <img src="https://insideretail.com.au/wp-content/uploads/2020/08/hairdresser.jpg" class="img-fluid" />
          </div>
          <div class="col text-left">
            <img src="images/service-stars-demo.svg" alt="Ranking">
            <!-- Insignia Verificado -->
            <p class="card-item-indication"><i class="fas fa-shield-check pr-1"></i> Text</p>


          </div>
        </div>

      </div>
      <!-- /Card 1-->

Answer 1

我用新的 img has your class 包裹了 div 标签以避免更改 .col 宽度并使 img 具有与您的全宽推荐的填充，它在不同的屏幕上看起来都不错。您可以从这里查看更改https://codepen.io/abdelrhman-m27/pen/jOVBzLx

如何使我的方形图像具有响应性？

1 个答案: