Js动态设置Img大小

function ResizePic() {
        $(‘img‘).each(function () {
            var maxWidth = 450; // 图片最大宽度
            var maxHeight = 750;    // 图片最大高度
            var ratio = 0;  // 缩放比例
            var width = $(this).width();    // 图片实际宽度
            var height = $(this).height();  // 图片实际高度

// 检查图片是否超宽
            if (width > maxWidth) {
                //计算缩放比例
                ratio = maxWidth / width;
                $(this).css("width", maxWidth); // 设定实际显示宽度
                height = height * ratio;    // 计算等比例缩放后的高度
                $(this).css("height", height);  // 设定等比例缩放后的高度
            }

// 检查图片是否超高
            if (height > maxHeight) {
                ratio = maxHeight / height;
                $(this).css("height", maxHeight);   // 设定实际显示高度
                width = width * ratio;    // 计算等比例缩放后的高度
                $(this).css("width", width * ratio);    // 设定等比例缩放后的高度
            }
        });

}

时间: 2024-08-24 07:38:30

Js动态设置Img大小的相关文章

移动端应该如何动态设置字体大小?

rem由来:font size of the root element,那么rem是个单位,单位大小由它第一代老祖宗的font-size的大小决定.现在前端码农们为了能在各个屏幕上看到一个健康的网页在默默的牺牲着自己的健康,因为不仅要知道rem是个单位,更重要的是要知道怎么能在不同分辨率下呈现的页面都很NB. 事故造成原因:1.px单位在PC上很流行,在手机屏幕上一看,MLGB的,同样的12px却小的跟蚂蚁似的.2.好不容易在iPhone4上调的正常了,换个菊花牌手机,MBD不堪入目了.3.知道

Dynamic CRM 2013学习笔记(二十八)用JS动态设置字段的change事件、必填以及可见

我们知道通过界面设置字段的change事件,是否是必填,是否可见非常容易.但有时我们需要动态地根据某些条件来设置,这时有需要通过js来动态地控制了. 下面分别介绍如何用js来动态设置.   一.动态设置字段的change事件 // form on load event function onLoad() { init();   pageAttr.delivery_from.addOnChange(deliveryFromChange); pageAttr.type.addOnChange(typ

js动态设置select的默认值

根据需求动态的设置select的默认值,若要选定默认则代码selected="selected".动态设置则如下所示: <html> <table> <tr> <td width="250" align="left"> <select name="job" size="1" > <option value="普通会员"&g

如何在代码中动态设置字体大小

//给一个id为name的TextView设置字体大小 TextView mName = (TextView)findViewById(R.id.name); mName.setTextSize(22); 开始学Android的时候,设置字体大小,无非用上面的代码.写的非常舒服,都不知道22用的是什么单位,字体太小,数字改大点,字体太大,数字改小点.Android编写多了,想要读dimens里设置的22值.很简单下面就是代码. www.2cto.com [java] //XML中的定义<dime

JS动态设置css的几种方式

1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100); element.setAttribute

js 动态设置 div 背景图片 并滚动显示

var imgs =["../img/index/bgstyle/style1/index_top_bg2.jpg", "../img/index/bgstyle/style1/index_top_bg3.jpg", "../img/index/bgstyle/style1/index_top_bg1.jpg"]; //(设定想要显示的图片) var i = 0; var head=document.getElementsByClassName(

浅谈移动端的自适应问题——响应式、rem/em、利用Js动态实现移动端自适应

随着3G的普及,越来越多的人使用手机上网.移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?本篇文章将讲述自适应网页设计的概念和方法,使网页开发人员维护同一个网页代码,即可使网站在多种设备上具有更好的阅读体验.本文详细介绍了自适应网页的实现方法,希望能给迷惑的你带来帮助. 一. 在HTML的头部加入meta标签 在HTML的头部,也就是head标签中增加meta标签,告诉浏览器网页宽度等于设备屏幕宽度,且不进行缩放,

GridView动态设置Item的宽高 第一个Item不显示的问题

在viewpaper中添加了一个Gridview,每个viewpaper要正好铺满显示3X2个,由于girdview是纵向可扩展的,所以我需要动态设置Gridview中item的高度,来确认铺满. 遇到的问题:Gridview中第一个item不显示 动态设置Item的高度只需要在adapter的getView方法中 使用parent的宽高进行重新计算就行了 废话不多说,直接上代码 <pre name="code" class="java">@Overri

js+jquery动态设置/增加/删除/获取元素属性的两种方法集锦对比(动态onclick属性设置+动态title设置)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>