JS等比例缩放图片并构建图片水平垂直居中解决方案
2015-11-25 13:51
295 查看
有的时候需要展示图片的时候需要展示好看一些,就像WINDOWS文件夹图片缩略展示,图片可以等比例缩放又可以水平垂直方向都居中,这样多好?可惜网上这样的解决方案并不多,下面给出具体解决方案,希望能帮助到一些朋友!
一、JS实现图片等比例缩放
在写JS之前先了解下图片本身加载的时候会触发onload事件,这样就可以利用这个事件做一些处理了~~
下面给出autoSize函数具体写法
二、缩放后的图片水平垂直居中
在上一篇/article/11506561.html已经给出了图片水平垂直居中的例子了。下面直接给出实现代码。
样式代码:
三、具体效果看下图
如有错误欢迎大家指出!
一、JS实现图片等比例缩放
在写JS之前先了解下图片本身加载的时候会触发onload事件,这样就可以利用这个事件做一些处理了~~
<ul> <li><img src="promotion.jpg" onload="autoSize(this,100,100)"></li> </ul>上面HTML代码图片加载时调用autoSize函数,函数有3个参数,依次分别为图片本身对象、父元素高度、父元素宽度
下面给出autoSize函数具体写法
function autoSize(ImgD,h,w) { var image = new Image(); image.src = ImgD.src; if (image.width<w && image.height<h) { ImgD.width=image.width; ImgD.height=image.height; } else { if (w / h <= image.width / image.height) { ImgD.width=w; ImgD.height=w * (image.height / image.width); } else { ImgD.width=h * (image.width / image.height); ImgD.height=h; } } }到此图片等比例缩放已经好了~~~
二、缩放后的图片水平垂直居中
在上一篇/article/11506561.html已经给出了图片水平垂直居中的例子了。下面直接给出实现代码。
<ul> <li><img src="promotion.jpg" onload="autoSize(this,100,100)"><span></span></li> <li><img src="640.jpg" onload="autoSize(this,100,100)"><span></span></li> </ul>给每个图片加兄弟标签行内标签,如span、i 等标签
样式代码:
ul { list-style-type: none; overflow: hidden; } ul li { width: 100px; height: 100px; border:1px solid #ccc; float: left; margin-right: 10px; text-align: center; } ul li span { display: inline-block; width: 0; height: 100%; vertical-align: middle; } ul li img { vertical-align: middle; }到此图片水平垂直居中也好了~~~~~
三、具体效果看下图
如有错误欢迎大家指出!
相关文章推荐
- JS引用html页面
- javaScript去除空格或换行
- JSP中多种include标签的区别?
- 页面弹框之外的区域点击关闭弹框js
- js实现动画效果
- fastJson解析
- js插件的经典写法与总结
- 返回Json数据浏览器带上<pre></pre>标签解决方法
- js 连接地址分析
- javascript下ie7,ie8的Date Bug的解决
- JavaScript的this词法(二)
- javascript 基础教程[温故而知新一]
- WCF 自托管、无配置文件实现jsonp(跨域)的访问
- highChartsjs饼状图
- ExtJS中的全局变量的保存和使用
- DIV滚动条到底部判断且自动加载,到上限更多选项
- JSON
- javascript定义对象写法
- [javascript]DOM基础
- jsp内置对象作业2-留言簿