图像在移动视图上无法正确显示

Question

我的问题是关于移动设备中的图像(照片二(没有一一显示为欲望，并越过"项目"部分的高度限制并下降到"联系人"部分。有人可以给我一个解决方案吗？ 在照片一中，您可以看到它们在桌面视图中的显示方式。

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

如果您不希望它们在PC上一个接一个地出现，请尝试为每种类型的屏幕使用具有适当宽度@media屏幕。对于PC使用：弯曲方向：行。

我希望能帮助你，

问候。