用 jQuery实现图片等比例缩放大小

原文:http://www.open-open.com/code/view/1420975773093

  <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>  
时间: 2024-10-07 22:29:09

用 jQuery实现图片等比例缩放大小的相关文章

jQuery实现的图片等比例缩放效果

jQuery实现的图片等比例缩放效果:如果一个容器中放一个比容器还要大的图,那就可能就造成布局出现问题,就算是不容器大,有时候也看起来不够美观,这时候就要限制图片的尺寸,当然不能变形,否则就难看了,下面就介绍一下如何使用jQuery实现等比例缩放效果.代码如下: <div id="demo"> <img src="a.jpg" width="800" height="300" alt="图片&quo

S实现控制图片显示大小的方法【图片等比例缩放功能】

S实现控制图片显示大小的方法[图片等比例缩放功能] [需求]:读取磁盘中的图片,展示在弹出框中,等比例缩放图片,使图片显示完全. (读取磁盘中的图片展示在前台,请参照我的另一篇文章:) [开发]: 调用说明: 直接调用js函数即可. 我测试是一个image 标签中直接调用,如下: <div> <img id="showImageimg"  src="/sirdifoa/applycorrection/getImage.do?imgName=2017001.j

roid imageView图片按比例缩放

android:scaleType可控制图片的缩放方式,示例代码如下: 1 <ImageView android:id="@+id/img" 2      android:src="@drawable/logo" 3      android:scaleType="centerInside" 4     android:layout_width="60dip" 5     android:layout_height=&q

javascript图片等比例缩放代码

javascript图片等比例缩放代码: 图片的尺寸在初始的状态下往往不能够完美的适应网页的布局,这个时候就需要对图片进行缩放处理,当然不能够是无规则的进行缩放,否则可能出现图片变形现象,下面是一段能够对图片进行等比例缩放的实例代码. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&q

微信小程序学习点滴《十二》:图片等比例缩放 获取屏幕尺寸图片尺寸 自适应

原文:http://www.wxapp-union.com/portal.php?mod=view&aid=360 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏幕宽.我之前在做Android的时候也会遇到图片等比例缩放的问题.应该是用图片宽高比和屏幕宽高比做判断.做个笔记. 老规矩,先上图. 1.图片高宽比小于屏幕高宽比 2.图片高宽比大于屏幕高宽比 3.这种其实也是图片高宽比小于屏幕高宽比,但是高宽都大于屏幕高宽.所以不能简单用高宽来判断,应该是用高宽比判断后做

android图片等比例缩放 填充屏幕

用IamgeView的 android:scaleType  设置属性的时候  填充屏幕出现的各种问题 /** * 将图片等比例缩放 setAdjustViewBounds setMaxWidth setMaxWidth必须同时设置才有效 * * @param context * @param view * 父容器 * @param image * 图片控件 * @param source * 图片资源 */ public static void setImageViewMathParent(A

[前端]如何让图片等比例缩放,同时撑满父级容器的长或宽

[前端]如何让图片等比例缩放,同时撑满父级容器的长或宽 最近碰到一个问题,如何在一个容器里同时放一张图片,而这张图片会等比例缩放,长或宽会跟着父级容器的长或宽一致. 找了一段时间,发现了 css3 中有这个属性: object-fit: contain; 具体怎么使用:见这篇文章 半深入理解CSS3 object-position/object-fit属性 完 原文地址:https://www.cnblogs.com/htoooth/p/8676274.html

前端学习代码实例-JavaScript 图片等比例缩放裁切详解

本文将通过代码实例详细介绍一下如何实现图片等比例缩放裁切效果. 图片有两种应用方式,一种作为子元素存在,一种是作为背景图片. 在每一种应用方式中,图片的等比例缩放又可以大致分为如下几种情况: (1).确保图片能够填充满元素,超出的部分被裁切或者隐藏. (2).确保图片的长或者宽填充满元素,超出的部分被裁切或者隐藏. 下面通过代码实例分别介绍一下上述列举的中可能,需要的朋友可以做一下参考. 一.作为背景图片: 通过CSS的background-image属性可以设置元素的背景图片效果. 下面就以如

理解CSS3中的background-size(对响应性图片等比例缩放)

2016-03-10 01:40 by 空智, 7463 阅读, 8 评论, 收藏, 编辑 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用background-size:400px 200px缩放设置 固定宽度400px和高度200px-使用background-size:400px;的缩放设置,那么第二个参数会自动转换为auto 固定宽度400px和高度200px-使用background-size:100% 100%