怎么让图片的高度根据屏幕的宽度来自适应

如何让图片的高度根据屏幕的宽度来自适应
我现在html界面中有个图片，我想让图片的宽度占满屏幕（可以拉伸），高度为屏幕宽度的1/3，这个该怎么实现，现在只会固定高度，但在不同大小的屏幕上，显示效果差别很大
<img style="width: 100%;height: 180px" src="***" />
------解决方案--------------------

<!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>

怎么让图片的高度根据屏幕的宽度来自适应

相关推荐