Div 并且图像在高度为 100vh 时垂直未对齐

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;">

对我来说，网站是这样的：
Image （为此我拍了一张黑色图片。）

如果你能告诉我这背后的原因，你能不能也告诉我一个纠正它的方法，所以这两个都从相同的高度开始。它看起来有点像以下网站：
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;">

Div 并且图像在高度为 100vh 时垂直未对齐

Div and Image vertically missalligned when height: 100vh

html

css

display

object-fit