100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > jQuery实现等比例缩放大图片

jQuery实现等比例缩放大图片

时间:2018-12-01 19:27:44

相关推荐

jQuery实现等比例缩放大图片

在页面布局时,有时会遇到大图片将页面容器撑大,超出规定区域,

这时我们就需要将图片按比例缩放,让大图片自适应页面布局。

查看演示/jquery_image_scaling/

1、页面中有如下图片

<img alt="leaf" src="img/leaf.jpg">

2、使用jQuery将图片缩放

<script type="text/javascript">window.onload = function() {var w = 500;//设置最大宽度,也可根据img的外部容器 而动态获得,比如:$("#demo").width();$("img").each(function() {//如果有很多图片,使用each()遍历 var img_w = $(this).width();//图片宽度 var img_h = $(this).height();//图片高度 if (img_w > w) {//如果图片宽度超出指定最大宽度 var height = (w * img_h) / img_w; //高度等比缩放 $(this).css( {"width" : w,"height" : height});//设置缩放后的宽度和高度 }});}$(document).ready(function() {//就本例而言 不要用 jQuery中的ready 你懂的...})</script>

作者:itmyhome

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。