响应式网格项目中的问题

Question

我在桌面的响应式图像中遇到问题，结果与预期一致，但在任何其他设备中，最后两个网格项的高度与其他不符合预期的网格项不同 它应该与网格项的其余部分具有相同的高度图像来自https://drive.google.com/uc?export=download&id=1gJ-g7EWreZu38DlaZltLDylPIBDHLSxX

我说的最后两个网格项目是树冠和海滩大门，它应该与市场和纪念碑具有相同的高度

.adventure-card {
  /* TODO: MODULE_ADVENTURES_GRID */
  /* 1. Fill in the required properties. */
  display: flex;
  flex-wrap: wrap;
  cursor: none;
  align-content: space-around;
  justify-content: right;
  height: 80%;
}

.adventure-card img {
  /* TODO: MODULE_ADVENTURES_GRID */
  /* 1. Fill in the required properties. */
  width: 100%;
  height: 100%;
}

<div class="container">
  <div class="content">
    <!-- TODO: MODULE_ADVENTURES_GRID -->
    <!-- 1. Create the grid of adventures by adding child elements as required. -->
    <div class="row">
      <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
        <a href="resort/index.html">
          <div class="adventure-card p-1 border bg-light">
            <div class="adventure-card img-responsive">
              <img src="/assets/adventures/resort.jpg" alt="resort.jpg">
            </div>
            <p>Resort</p>
            <p>&#8377;1200 </p>

          </div>
        </a>
      </div>
      <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
        <div class="adventure-card  border bg-light">
          <div class="adventure-card img-responsive">
            <img src="/assets/adventures/tower.jpg" alt="tower.jpg">
          </div>
          <p>Tower</p>
          <p>&#8377;1,800 </p>
        </div>
      </div>
      <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
        <div class="adventure-card  border bg-light">
          <div class="adventure-card img-responsive">
            <img src="/assets/adventures/mount.jpg" alt="Skiing.jpg">
          </div>
          <p> Skiing</p>
          <p>&#8377;1,900 </p>
        </div>
      </div>
      <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
        <div class="adventure-card  border bg-light">
          <div class="adventure-card img-responsive">
            <img src="/assets/adventures/university.jpg" alt="university.jpg">
          </div>
          <p> University</p>
          <p>&#8377;800 </p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
        <div class="adventure-card  border bg-light">
          <div class="adventure-card img-responsive">
            <img src="/assets/adventures/market.jpg" alt="market.jpg">
          </div>
          <p> Market</p>
          <p>&#8377;600 </p>
        </div>
      </div>
      <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
        <div class="adventure-card  border bg-light">
          <div class="adventure-card img-responsive">
            <img src="/assets/adventures/church.jpg" alt="monument.jpg">
          </div>
          <p> Monument</p>
          <p>&#8377;1,200 </p>
        </div>
      </div>
      <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
        <div class="adventure-card  border bg-light">
          <div class="adventure-card img-responsive">
            <img src="/assets/adventures/canopy.jpg" alt="canopy.jpg">
          </div>
          <p> Canopy</p>
          <p>&#8377;1,800 </p>
        </div>
      </div>
      <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-5">
        <div class="adventure-card  border bg-light">
          <div class="adventure-card img-responsive">
            <img src="/assets/adventures/beachside.jpg" alt="canopy.jpg">
          </div>
          <p> Beach Gateaway</p>
          <p>&#8377;2,200 </p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您提到的图像的大小与其他图像不同，因此如果您将它们的宽度和高度 %100 作为自定义 CSS，它们看起来会有所不同。这就是为什么你可以给它们特定的宽度和高度以使其相等而不是使用百分比。