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

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

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

类似这样的效果：
图片描述

html css

阅读 16.6k

3 个回答

maple5233

✓ 已被采纳

可以用 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%高度就是了

ZililuYa

12114

发布于
2017-04-18

Css不太好弄，但是JS可以。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>top</title>
  <style>*{margin: 0;padding: 0}</style>
</head>
<body>

<div style="width: 100%;height: 100px;position: absolute;top: 0;left: 0;background-color: #1b6d85" id="ball"></div>
<script type="text/javascript">
var ball=document.getElementById('ball');
var h=window.innerHeight/2;
ball.style.height=h+'px';
</script>
</body>
</html>