html - 高度：100vh 时 Div 和图像垂直错位

Question

有人可以告诉我为什么 div 和图像是垂直分离的吗？

<div style="height: 100vh; display: inline-block;width: 50%; background-color: blue">TEST
</div><!--
--><img src="photos/openening.jpg" alt="SICK SHOT" style="height:100vh; display: inline-block; width: 50%; object-fit:cover;">

对我来说，网站看起来像这样：
图片 （我为此拍了一张黑色图片。）

如果你能告诉我这背后的原因，你能不能也告诉我一个纠正它的方法，所以两者都从相同的高度开始。它看起来有点像以下网站：
petermckinnon

我也愿意接受一些不同的方法来解决这个问题。

Answer 1

这是因为图像的垂直对齐属性使其与 div 的顶部对齐。我在下面的示例中更正了它：

<div style="height: 100vh; display: inline-block;width: 50%; background-color: blue">TEST
</div><!--
--><img src="photos/openening.jpg" alt="SICK SHOT" style="height:100vh; display: inline-block; width: 50%; vertical-align:bottom; background: black; object-fit:cover;">