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的未知尺寸图片保持比例水平垂直居中函数的更多相关文章

  1. 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中

    单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中   <div class="ServicesLiTopPic"> <i>&l ...

  2. CSS中如何实现未知尺寸图片垂直居中

    在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是随意,而是有其现实的原因,垂直居中 ...

  3. 纯css实现div中未知尺寸图片的垂直居中

    1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是 ...

  4. table-cell实现未知宽高图片,文本水平垂直居中在div

    <BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-o ...

  5. 未知高度-纯css实现水平垂直居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 图片和span水平垂直居中

    <style type="text/css"> .content{ width:20%; height:60px; border:1px solid red; text ...

  7. css中:如何让一个图片(不知道宽高,宽高可能比父元素div大),在父元素div内部水平垂直居中,并且不溢出父元素div,且图片不拉伸变形(可等比例缩小)?

    欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...

  8. 前端面试题:CSS实现水平垂直居中

    这是一个挺常见的前端面试题,但是没有做过总结.有的时候可能会使用完了,很长一段时间不去使用,会慢慢忘记.所以,温故而知新,还是很有必要的. 一.绝对定位元素的居中实现 这一种工作中用的应该是最多的,兼 ...

  9. CSS水平垂直居中总结

    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...

随机推荐

  1. InputStreamReader & OutputStreamWriter

    InputStreamReader 是字节流通向字符流的桥梁:它使用指定的 charset 读取字节并将其解码为字符. OutputStreamWriter 是字符流通向字节流的桥梁:可使用指定的 c ...

  2. ps -aux 命令下的前几行内容解释 与 top命令下的前几行内容解释

    系统进程分为5种不同的状态: R(运行):正在运行或在运行队列中等待 S(中断):休眠中,在等待某个条件的形成或接受到信号 D(不可中断):收到信号不唤醒和不可运行.进程必须等待直到有中断发生 Z(僵 ...

  3. 在dell服务器上装windows server 2012详细解析

    壹: 首先确定磁盘阵列的问题,在dell服务器开机后按住 Ctrl+R 或者 F2 会展开虚拟磁盘创建菜单 详细步骤可以查看:https://jingyan.baidu.com/article/915 ...

  4. vue-Slot分发内容

    ①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下 父组件在子组件内套的内容,是不显示的. 例如 ...

  5. pycharm安装jpype报错及解决方法

    安装jpype时发生报错: 按照提示去装了Microsoft visual C++,结果重新安装还是报错,根据https://blog.csdn.net/qq_38934189/article/det ...

  6. Windows 作为 openssl server端时的处理

    1. 跟上一个博客一样, 下载openssh 然后安装时 同时选择 server端. 2. 安装时设置密码 其他默认即可 3. xshell 创建连接. 注意 我使用的是 administrator ...

  7. VMware 虚拟机 不能上网 CentOS 6.5 Windows 7上面安装了VMware,然后安装了CentOS系统,安装完了无法上网;

    今天想要学习一下大数据的知识,在windows 7上面 安装了VMware,然后安装了Centos系统,但是发现安装完了,无法上网 我在Centos上面 使用 ping www.baidu.com 始 ...

  8. iOS 一些常见问题

    1.屏幕横屏时 xib上拖拉的控件不会跟着横过来: 是因为在主文件面里的 main interface 方框里的main 没有删除: 2.运行出现你没有权限 : 清理一下: 3.将对象转成字符串: / ...

  9. P4314 CPU监控

    题面 这是一道堪称"线段树3"的线段树好题,对于\(lazy\)标记的操作可以说是非常巧妙 我们用结构体来记录\(lazy\)标记,结构体中定义\(a,b\)两个元素,\(a\)表 ...

  10. 百度地图经纬度批量查找功能XGeocoding使用手册

    <XGeocoding使用手册> 1.下载XGeocoding V2 http://www.gpsspg.com/xgeocoding/download/ 2.解压XGeocoding_v ...