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> ...
随机推荐
- InputStreamReader & OutputStreamWriter
InputStreamReader 是字节流通向字符流的桥梁:它使用指定的 charset 读取字节并将其解码为字符. OutputStreamWriter 是字符流通向字节流的桥梁:可使用指定的 c ...
- ps -aux 命令下的前几行内容解释 与 top命令下的前几行内容解释
系统进程分为5种不同的状态: R(运行):正在运行或在运行队列中等待 S(中断):休眠中,在等待某个条件的形成或接受到信号 D(不可中断):收到信号不唤醒和不可运行.进程必须等待直到有中断发生 Z(僵 ...
- 在dell服务器上装windows server 2012详细解析
壹: 首先确定磁盘阵列的问题,在dell服务器开机后按住 Ctrl+R 或者 F2 会展开虚拟磁盘创建菜单 详细步骤可以查看:https://jingyan.baidu.com/article/915 ...
- vue-Slot分发内容
①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下 父组件在子组件内套的内容,是不显示的. 例如 ...
- pycharm安装jpype报错及解决方法
安装jpype时发生报错: 按照提示去装了Microsoft visual C++,结果重新安装还是报错,根据https://blog.csdn.net/qq_38934189/article/det ...
- Windows 作为 openssl server端时的处理
1. 跟上一个博客一样, 下载openssh 然后安装时 同时选择 server端. 2. 安装时设置密码 其他默认即可 3. xshell 创建连接. 注意 我使用的是 administrator ...
- VMware 虚拟机 不能上网 CentOS 6.5 Windows 7上面安装了VMware,然后安装了CentOS系统,安装完了无法上网;
今天想要学习一下大数据的知识,在windows 7上面 安装了VMware,然后安装了Centos系统,但是发现安装完了,无法上网 我在Centos上面 使用 ping www.baidu.com 始 ...
- iOS 一些常见问题
1.屏幕横屏时 xib上拖拉的控件不会跟着横过来: 是因为在主文件面里的 main interface 方框里的main 没有删除: 2.运行出现你没有权限 : 清理一下: 3.将对象转成字符串: / ...
- P4314 CPU监控
题面 这是一道堪称"线段树3"的线段树好题,对于\(lazy\)标记的操作可以说是非常巧妙 我们用结构体来记录\(lazy\)标记,结构体中定义\(a,b\)两个元素,\(a\)表 ...
- 百度地图经纬度批量查找功能XGeocoding使用手册
<XGeocoding使用手册> 1.下载XGeocoding V2 http://www.gpsspg.com/xgeocoding/download/ 2.解压XGeocoding_v ...