1、首先要有一个用来存放图片的div<div style="width:200px; height:200px;"></div>
2、在div中放入图片<div style="width:200px; height:200px;"><img src="example.jpg" style="width:100%;" /></div>此时的图片是适应div的宽度的,即宽度为外层div宽度的100%,高度就成图片本身的比例
3、我们是通过js代码给图片设置一定的比例,此处我们用jquery1.9.1版本。导入jquery
4、写jquery代码,通过得到图片的宽度来设置图片的height属性function showImg(){ $("#content img").ea艘早祓胂ch(function(index, element) { var bili= 6/10; var width = $(element).width(); $(element).css("height",width*bili); }); }此处为了不使所有的图片都按照这个比例,我仅仅使id为content下的所有img标签设置高度
5、在页面加载的时候调用此方法,为body添加onload事件
6、这时候content下的所有图片便按照 宽:高=10:6 的比例显示了!是不是很简单!