<分区>
标签 html css display object-fit
<分区>
谁能告诉我为什么 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
我也愿意接受一些不同的方法。
最佳答案
这是因为图像的垂直对齐属性使其与 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;">关于html - 当高度为 : 100vh 时，Div 和图像垂直错位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59617365/