61,112
社区成员
发帖
与我相关
我的任务
分享如何让图片的高度根据屏幕的宽度来自适应
我现在html界面中有个图片，我想让图片的宽度占满屏幕（可以拉伸），高度为屏幕宽度的1/3，这个该怎么实现，现在只会固定高度，但在不同大小的屏幕上，显示效果差别很大
<img style="width: 100%;height: 180px" src="***" />
<img style="width: 100%;height: 180px" src="***" />
...全文
请发表友善的回复…
发表回复
人生难得一只鸡 2014-02-21
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
</style>
<script>
window.onload=function()
{
var oImg=document.getElementById('bgImg');
oImg.style.width='100%';
oImg.style.height=document.documentElement.clientHeight/3+'px';
//高度为可视区的1/3
}
</script>
</head>
<body>
<img src="http://a.hiphotos.baidu.com/image/w%3D400/sign=9bc7b0600db30f24359aed03f895d192/377adab44aed2e736b9a9d2d8501a18b87d6fa44.jpg" id="bgImg" />
</body>
</html>
Du_JunYan 2014-02-21
- 打赏
- 举报
高度不写不行吗？
<img style="width: 100%;" src="***" />
