图片在页面中处理的方法

var w=$(".img li i").width();  //获取图片承载容器的宽度$(".img li i").height(w*0.618);  //设置图片承载容器的高度

$(window).resize(function(){   //浏览器窗口大小改变时重新获取图片承载容器的宽度、设置其高度  var w=$(".img li i").width();  $(".img li i").height(w*0.618);});

function img() {
        var a=$(this).width(),    //获取图片宽度
            b=$(this).height(),   //获取图片高度
            e=a/b;     //计算宽高比
        if(a>=b){      //如果宽度大于高度
            if(e<1.618){   //如果宽高比小于等于1.618【PS.黄金比例宽高比1.618(宽1.618、高1)和0.618(宽0.618、高1)】,高度超出
                $(this).css({width:"100%",height:"auto"});  //使宽度100%,保证宽度不留空白边
                    /*图片居中*/
                    var imgH = $(this).height(),  //获取此时对应的图片高度
                    iH = $(this).parent().height(),   //获取其承载元素的高度
                    h = -(imgH - iH)/2;  //img-iH为图片高度超出承载容器的部分的高度
                    $(this).css(‘marginTop‘,h) //设置图片在容器中垂直居中
            }else{     //如果宽高比大于1.618,宽度超出
                $(this).css({height:"100%",width:"auto"});  //使高度100%显示,保证高度不留空白边
                    /*图片居中*/
                    var imgW = $(this).width(),  //获取此时对应的图片宽度
                    iW = $(this).parent().width(),  //获取其承载元素的宽度
                    w = -(imgW - iW)/2;    //imgW-iW为图片宽度超出承载容器的部分的宽度
                    $(this).css(‘marginLeft‘,w)  //设置图片在容器中水平居中
            }
        }else{  //高度大于宽度(代码同宽高比e小于1.618)
            $(this).css({width:"100%",height:"auto"});
                /*图片居中*/
                var imgH = $(this).height(),
                    iH = $(this).parent().height(),
                    h = -(imgH - iH)/2;
                    $(this).css(‘marginTop‘,h)
        }
    }
时间: 2024-08-09 14:44:25

图片在页面中处理的方法的相关文章

Javscript调用iframe框架页面中函数的方法

Javscript调用iframe框架页面中函数的方法,可以实现iframe之间传值或修改值了, 访问iframe里面的函数: window.frames['CallCenter_iframe'].hw_CallIn(callerid,sessionid); 说明: CallCenter_iframe为iframe的id hw_CallIn为iframe中页面中的方法名 callerid和sessionid为方法中的参数 例子如下:index.html <a href="#" o

用juery的ajax方法调用aspx.cs页面中的webmethod方法示例

juery的ajax调用aspx.cs页面中的webmethod方法:首先在 aspx.cs文件里建一个公开的静态方法,然后加上WebMethod属性,具体实现如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助 首先在 aspx.cs文件里建一个公开的静态方法,然后加上WebMethod属性. 如: [WebMethod] public static string GetUserName() { //...... } 如果要在这个方法里操作session,那还得将WebMethod的Enable

在包含图片的页面中正确使用iScroll

背景 iScroll初始化依赖DOM的高度计算,必须等DOM完全渲染好后才能使用iScroll.最近项目中有个页面需要使用iScroll,但是这个页面中包含许多图片,并且图片的高度是不定的,如果DOM ready后就去初始化iScroll肯定是有问题的(因为图片可能还没全部显示,DOM高度还没完全确定).必须等所有图片加载完才初始化iScroll. 解决方案 知道问题所在之后接着就去找解决方案了,千万不要使用setTimeout设置个延时,然后才去初始化iScroll. PS:项目中已经使用了z

JavaScript在页面中的引用方法

现在前端开发越来越流行,框架也越来越多,像ExtJs.JQuery.Bootstrap等.虽然入行这么多年,但是感觉自己在前端方面还是存在基础不牢的地方,特别是CSS和JS.因此最近打算重新阅读这方面的经典书籍,来夯实自己的基础.因此打算边读书,边写博客,将我自己的感觉有用的地方记下来,以加深印象. 在前端开发,人人都会遇到JavaScript,也必须了解它.在用到它之前,首先必须了解怎么样将其引用到自己的页面中去.以前因为是快速开发,很少去关注这点,对JavaScript的引入,一掠而过,没有

利用css来让一个div在页面中垂直居中的方法

一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就是该DIV宽度和高度的一半. width:300px; height:200px; position:absolute; left:50% top:50%; margin:-100px 0 0 -150px ; 2.使用jquery代码  $(window).resize(function(){ $

在action中将字符串、对象、list集合保存到值栈中,在jsp页面中获取的方法

转自:csdn 封装对象User,属性有id,username,email等1.1:在action中将字符串保存到值栈中   1.1.1 获取值栈对象         ValueStack stack = ActionContext.getContext().getValueStack();   1.1.2 将字符串保存到值栈中         stack.set("username","leo");1.2:在jsp页面中获取值栈中的字符串   1.2.1 <

FCKEditor在jsp页面中的配置方法

大家在使用博客园或者是在网站上面发表一些东西的时候,往往会发现,输入文字的不是一个简单的文本框,而是一个类似于word的在线编辑环境.这个插件叫FCKEditor,使用这个插件要进行一定程度的配置,下面我把配置方法给大家分享一下. 总共要下载两个文件,第一个文件的下载地址是 https://sourceforge.net/projects/fckeditor/files/FCKeditor/2.6.8/打开这个页面后大家会看到 这时页面中有两个可下载项,大家点击第二个可下载项FCKeditor_

让横向ul在页面中水平居中的方法

在导航的布局中,导航条会用横向布局的ul li.如果要让其居中,怎么办呢? 第一种方法: ul{text-align:center;} li{display:inline} 这种方法不适合ie低版本.因为这种方法会让ie默认让所有元素居中. 第二种方法: 用一个div把ul包起来,<div id="wrap"></div> #wrap{float:left;position:relative;left:50%;}      ul{position:relativ

让图片在div 中居中的方法

方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中. 结构如下: <div> <img src="images/tt.gif" width="150" height="100" /> </div> CSS样式如下: div {width:300px; height:150px; background-color:#CCC; border:#000 1px