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

在div中放入图片

此时的图片是适应div的宽度的，即宽度为外层div宽度的100%，高度就成图片本身的比例

我们是通过js代码给图片设置一定的比例，此处我们用jquery1.9.1版本。

导入jquery

写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标签设置高度

在页面加载的时候调用此方法，为body添加onload事件

这时候content下的所有图片便按照 宽：高=10：6 的比例显示了！是不是很简单！

完整代码

用户类似问题：

问题1：在网页制作中怎么限制图片的大小??

样式表：.img1{width:100px;height:50px;}行内样式是 这样即可控制！ >>详细

问题2：网页设计中图片的按比例显示问题

这个只能找图片处理软件 至少用那很容易做到 大小也可以随便调试 按比例不按比例均可 >>详细

问题3：怎样让图片在网页中按比例显示?

我有4464421，可以安比例设置，也可设置为超出了多少多长，就缩小为多长的 JS的 满意请采纳 >>详细

问题4：html网页中的图片随网页大小变化而变化？

超过屏幕宽度时，缩小，高度等比例缩小，小于屏幕宽度时，显示原图尺寸： img{height:auto;max-width:100%;} 始终随容器宽度变化： img{width:100%;height:auto} >>详细

问题5：网页设计的时候，如何让图片不被拉伸 而按照正常的...

一般通过JS的方法，这种方法网上介绍的很多，另外，通过组件自动生成缩略图，这应该是一种比较好的方法，但需要服务器支持，如果用在虚拟主机上，一般还是单独制作缩略图。 >>详细