html - 图像在移动 View 上显示不正确

Question

我的问题是关于移动设备中的图像 ( Photo Two ) 没有按要求一张一张地显示，并且越过了“元素”部分的高度限制并下降到“联系人”部分。有人可以建议我一个解决方案吗？在 Photo One您可以看到它们在桌面 View 中的显示方式。

#projects {
  width: 100%;
  height: 100vh;
  background-color: #eee;
}

.img-wrap {
  padding-top: 20px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.img-img {
  border-radius: 12px;
  max-width: 270px;
  width: 100%;
}

<div id="projects">
  <div class="container">
    <h1 class="work-title-1">My Recent Work</h1>
    <h2 class="work-title-2">"Here are a few recent design projects. Want to see more?"
      <a href="#">Email me.</a>
    </h2>
    <div class="row">
      <div class="col-sm-4">
        <div class="img-wrap">
          <img class="img-img" src="images/04.png">
          <p class="img-description">Blockchain pioneers bringing transparency, trust, and security to supply.
            <br><button class="btn"><a class="img-link" href="https://www.google.com/" target="_blank">Visit Website  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></button>
          </p>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="img-wrap">
          <img class="img-img" src="images/04.png">
          <p class="img-description">Blockchain pioneers bringing transparency, trust, and security to supply.
            <br><button class="btn"><a class="img-link" href="https://www.google.com/" target="_blank">Visit Website  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></button>
          </p>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="img-wrap">
          <img class="img-img" src="images/04.png">
          <p class="img-description">Blockchain pioneers bringing transparency, trust, and security to supply.
            <br><button class="btn"><a class="img-link" href="https://www.google.com/" target="_blank">Visit Website  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></button>
          </p>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="img-wrap">
          <img class="img-img" src="images/04.png">
          <p class="img-description">Blockchain pioneers bringing transparency, trust, and security to supply.
            <br><button class="btn"><a class="img-link" href="https://www.google.com/" target="_blank">Visit Website  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></button>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

如果您使用 flex 使它们一一显示，我建议您使用:

.row {
 display: flex;
 flex-direction: column;
}

如果您不想让它们在电脑上一一显示，请尝试为每种类型的屏幕使用具有适当宽度的@media screen。对于 PC 使用:flex-direction : row。

希望对你有所帮助

问候。