html - 高度:100vh 时 Div 和图像垂直错位
问题描述
有人可以告诉我为什么 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
我也愿意接受一些不同的方法来解决这个问题。
解决方案
这是因为图像的垂直对齐属性使其与 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;">
推荐阅读
- python - python函数中的折叠代码
- wordpress - 按下 Paypal 快速结帐按钮后 Wordpress Paypal 错误
- html - 从 .html 文件中获取 IP
- image - 如何使用 Golang 将图像上传到 Firebase 存储
- reactjs - 未捕获的 TypeError:this.state.people.map 在使用 map 函数时不是 react js 中的函数
- swiftui - 如何在swiftui中插入自定义图像作为navigationBarItem
- javascript - JSON.stringify 不在包含的对象之间添加逗号
- python - 我在 Python 中使用 Reddit API praw 抓取了数据,但像 ' 这样的字符显示为 't。我该如何解决?
- c++ - 这个断点不会被命中
- python - 在 django 模板中显示 python str 值