移动设备上图像之间的空间太大

Question

我在手机上的图像之间的空间太大了：手机版在开发工具上看起来不错：开发工具版本

HTML:

<div class="container-fluid">
<!-- <br> -->
<div class="row">
<img class="col-sm-6 col-md-4" src="digart/fire_cryinggirl.png" alt="girl crying underneath fire">
<img class="col-sm-6 col-md-4" src="digart/ko_munyeong.png" alt="chibi-style ko munyeong">
<!-- mindprison hidden on small-->
<img class="col-sm-6 col-md-4 d-sm-none d-md-block" src="digart/mind_prison.png" alt="brain in a prison">
</div>
</div>

CSS：

img {
object-fit: contain;
margin-bottom: 5vh;
}

我已经尝试过使用最大宽度和减小边距底部的媒体查询，但移动版本没有变化。

Answer 1

虽然当我尝试使用您的代码时，一切看起来都很好，但为什么要在css代码中使用vh似乎很奇怪。请在将vh更改为px或%后重试。

img {
object-fit: contain;
margin-bottom: 5px;
}

如果你有理由使用5vh，那么你应该在你的问题中解释更多。顺便问一下，你在移动设备上试过什么？

Answer 2

我想通了！对象拟合：包含使图像比例正确，但每个图像仍然占据了与我进行对象拟合时相同的高度：无。为了修复它，我只需要增加高度：70%。