javascript的未知尺寸图片保持比例水平垂直居中函数
JavaScript的图片在容器内水平垂直居中的函数,利用图片加载获取图片大小,使之在父节点内水平垂直居中
展示方式有两种:
1、当参数keepImageFull为true:保持图片比例,使图片可完整的水平居中显示在父节点内,未能填充的部分留白
2、当参数keepImageFull为false: 保持图片比例,完全覆盖父节点,超出部分溢出
container_width和container_height函数不是必须的,仅当无法自动获取到图片父节点的尺寸时传入
容器内不想用此方法处理的函数的图片,可以在图片节点上加上data-skip-loader属性
使用实例:
<div id="container">
<ul>
<li><img src="1.png" alt=""></li>
<li><img src="1.png" alt=""></li>
<li><img src="1.png" alt=""></li>
<li><img src="1.png" alt=""></li>
</ul>
<img src="" alt="" class="ignore-element" data-skip-loader="1">
</div>
<script>
imageCenter(document.getElementById('container'), false, 300, 200);
</script>
具体看参数说明:
/**
* 设置元素样式
* @param {Array|Element} element 要设置样式的dom元素
* @param {Object} styles 样式属性集合
*/
function setStyle(element, styles) {
var cssText = [];
if (styles) {
for (var prop in styles) {
if (styles.hasOwnProperty(prop)) {
cssText.push([prop, styles[prop]].join(':'));
}
}
} if (cssText.length) {
element.style.cssText += ';' + cssText.join(';');
} return element;
} /**
* 图片预加载
* @param {Element} node 要加载的容器节点
* @param {Function} after_single 单词加载成功执行函数
* @param {Function} after_all <可选> 全部成功执行函数
* @param {Object} context <可选> 函数运行域
*/
function loadImage(node, after_single, after_all, context) {
function load_check(loading) {
if (loading["complete"]) {
complete++;
setStyle(loading.ele, {
'width': 'auto',
'max-width': 'none',
'max-height': 'none'
});
if (typeof after_single === 'function') {
after_single.call(context, loading.ele, loading.width || 1, loading.height || 1, loading.i);
}
if (complete == filter_images.length && typeof after_all === 'function') {
after_all.call(context, complete);
}
loading.ele = null;
loading = null;
} else {
setTimeout(function(){
load_check(loading);
}, 100);
}
}
node = node || document; var images = node.getElementsByTagName("img");
var complete = 0;
// 过滤
var filter_images = [];
for (var j = 0; j < images.length; j++) {
if (!images[j].hasAttribute('data-skip-loader')) {
filter_images.push(images[j]);
}
} var i = 0;
while(i < filter_images.length) {
var image = filter_images[i];
var loading = new Image();
setStyle(image, {
'width': '100%',
'height': 'auto',
'max-width': '100%',
'max-height': '100%'
});
loading.src = image.src;
loading.ele = image;
loading.i = i;
load_check(loading);
loading = null;
i++;
}
} /**
* 图片水平垂直居中于容器中
* @param {Element} node 容器节点
* @param {Boolean} keepImageFull 保持图片全图可见,未能填充的部分留白 || 以长宽的最小值填满,未能显示的部分溢出影藏
* @param {Number} container_width <可选> 容器宽度
* @param {Number} container_height <可选> 容器高度
*/
function imageCenter(node, keepImageFull, container_width, container_height) {
loadImage(node, function(img, width, height, index) {
var parent = img.parentNode;
if (!container_width) {
container_width = Math.max(1, parent.offsetWidth);
}
if (!container_height) {
container_height = Math.max(1, parent.offsetHeight);
}
setStyle(parent, {
'overflow': 'hidden'
});
var css = {
'display': 'block',
'border-width': 0
};
css['width'] = Math.max(1, Math.min(width, container_width));
css['height'] = css["width"] * height / width; keepImageFull = keepImageFull ? 1 : -1; // 宽度修正
if ((css['width'] - Math.min(width, container_width)) * keepImageFull > 0) {
css['width'] = container_width;
css['height'] = height * container_width / width;
} // 高度修正
if ((css['height'] - Math.min(height, container_height)) * keepImageFull > 0) {
css['width'] = width * container_height / height;
css['height'] = container_height;
} css['margin-left'] = (container_width - css['width']) / 2 + 'px';
css['margin-top'] = (container_height - css['height']) / 2 + 'px';
css['width'] += 'px';
css['height'] += 'px'; setStyle(img, css);
});
}
javascript的未知尺寸图片保持比例水平垂直居中函数的更多相关文章
- 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中
单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中 <div class="ServicesLiTopPic"> <i>&l ...
- CSS中如何实现未知尺寸图片垂直居中
在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是随意,而是有其现实的原因,垂直居中 ...
- 纯css实现div中未知尺寸图片的垂直居中
1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是 ...
- table-cell实现未知宽高图片,文本水平垂直居中在div
<BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-o ...
- 未知高度-纯css实现水平垂直居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 图片和span水平垂直居中
<style type="text/css"> .content{ width:20%; height:60px; border:1px solid red; text ...
- css中:如何让一个图片(不知道宽高,宽高可能比父元素div大),在父元素div内部水平垂直居中,并且不溢出父元素div,且图片不拉伸变形(可等比例缩小)?
欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...
- 前端面试题:CSS实现水平垂直居中
这是一个挺常见的前端面试题,但是没有做过总结.有的时候可能会使用完了,很长一段时间不去使用,会慢慢忘记.所以,温故而知新,还是很有必要的. 一.绝对定位元素的居中实现 这一种工作中用的应该是最多的,兼 ...
- CSS水平垂直居中总结
行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...
随机推荐
- 更新ubuntu的源
什么是Ubuntu的软件源? 我们在使用Debian或者Ubuntu的apt-get工具来安装需要的软件时,其实就是从服务器获取需要安装的软件并把它安装在本地计算机的过程.所谓的软件源,就是我们获取软 ...
- Beta阶段DAY3
一.提供当天站立式会议照片一张 二.每个人的工作 1.讨论项目每个成员的昨天进展 刘阳航:尝试改进UI,美化界面. 林庭亦:调整难度设置. 郑子熙:尝试改进UI,美化界面. 陈文俊:调整难度设置. 2 ...
- 评论各组alpha发布
单纯从用户和体验者的角度来评价. 天天向上组的连连看游戏和新锋组的俄罗斯方块游戏,从alpha发布的成果完成度来看,两个游戏现在都可以玩,但连连看的完成度更高,可选背景,可选音乐.俄罗斯方块还有其他界 ...
- HDU 2123 An easy problem
http://acm.hdu.edu.cn/showproblem.php?pid=2123 Problem Description In this problem you need to make ...
- springboot学习笔记-3 整合redis&mongodb
一.整合redis 1.1 建立实体类 @Entity @Table(name="user") public class User implements Serializable ...
- 记一个鼠标略过时候的css动画
.circle{ width: 15px; height: 15px; background: rgba(0,0,0,0.7); border-radius: 50%; display: table- ...
- 【BZOJ1029】建筑抢修(贪心)
[BZOJ1029]建筑抢修(贪心) 题面 BZOJ 洛谷 题解 感觉自己已经不会贪心了. 很明显的一个想法是按照终止时间排序,然后能选则选. 但是这样子可能会因为前面选择了一个修理时间很长的,导致现 ...
- 【BZOJ3105】【CQOI2013】新Nim游戏
Description 传统的Nim游戏是这样的:有一些火柴堆,每堆都有若干根火柴(不同堆的火柴数量可以不同).两个游戏者轮流操作,每次可以选一个火柴堆拿走若干根火柴.可以只拿一根,也可以拿走整堆火柴 ...
- 洛谷 P1972 [SDOI2009]HH的项链 解题报告
P1972 [SDOI2009]HH的项链 题目描述 HH 有一串由各种漂亮的贝壳组成的项链.HH 相信不同的贝壳会带来好运,所以每次散步完后,他都会随意取出一段贝壳,思考它们所表达的含义.HH 不断 ...
- HDU.5692 Snacks ( DFS序 线段树维护最大值 )
HDU.5692 Snacks ( DFS序 线段树维护最大值 ) 题意分析 给出一颗树,节点标号为0-n,每个节点有一定权值,并且规定0号为根节点.有两种操作:操作一为询问,给出一个节点x,求从0号 ...