html - CSS 如何让图片自适应手机屏幕高度？

问题描述

问 题

需求：
页面内容包括图片和文字两部分，图片在上，文字在下，各占手机屏幕高度的50%,要正好适应屏幕高度，不可以出现类似滚动条的上下滑动。

由于要适应所有手机，屏幕大小和比例不固定。

类似这样的效果：

解决方案

可以用 height:50vh;
文档: https://developer.mozilla.org...
vh是视口高度的 1/100。
需要设置<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1">

还有一种方案 html和body都设置height:100% 也可以达到占满屏幕的效果 然后上下都设置50%高度就是了

这篇关于html - CSS 如何让图片自适应手机屏幕高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！