如何在网页中按比例限制图片的显示大小

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").each(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 的比例显示了！是不是很简单！

1