//调整多张图片,让图片水平垂直居中

function adjustImg(){

let imgDiv = document.getElementsByClassName("img");//找到img标签外面的class 名为img的div盒子

for (let i = 0; i < imgDiv.length; i++){

// console.log(i);

let obj = imgDiv[i].getElementsByTagName("img")[0];

if (obj.complete) {//确保图片已经加载完成

let imgH = obj.offsetHeight;

let imgW = obj.offsetWidth;

let img_scale = imgW/imgH;

let boxH = obj.parentNode.offsetHeight;

let boxW = obj.parentNode.offsetWidth;

let box_scale = boxW / boxH;

// console.log("imgH="+imgH+" imgW="+imgW+" boxH="+boxH+" boxW="+boxW);

if(box_scale > img_scale){

obj.style.width = "100%";

imgH = obj.offsetHeight;

imgW = obj.offsetWidth;

let h = (imgH-boxH)/2;

obj.style.marginTop = -h + "px"; //确保图片垂直居中

}else{

obj.style.height = "100%";

imgH = obj.offsetHeight;

imgW = obj.offsetWidth;

let w = (imgW-boxW)/2;

obj.style.marginLeft = -w + "px";

}

} else {

obj.onload = function(){

let imgH = obj.offsetHeight;

let imgW = obj.offsetWidth;

let img_scale = imgW/imgH;

let boxH = obj.parentNode.offsetHeight;

let boxW = obj.parentNode.offsetWidth;

let box_scale = boxW / boxH;

// console.log("imgH="+imgH+" imgW="+imgW+" boxH="+boxH+" boxW="+boxW);

if(box_scale > img_scale){

obj.style.width = "100%";

imgH = obj.offsetHeight;

imgW = obj.offsetWidth;

let h = (imgH-boxH)/2;

obj.style.marginTop = -h + "px";

}else{

obj.style.height = "100%";

imgH = obj.offsetHeight;

imgW = obj.offsetWidth;

let w = (imgW-boxW)/2;

obj.style.marginLeft = -w + "px";

}

};

// obj.style.height = "100%";

// obj.style.margin = "0 auto";

}

}

}

让图片在div盒子中水平垂直居中的更多相关文章

  1. CSS实现图片在div a标签中水平垂直居中

    CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...

  2. DIV块中 元素垂直居中

    1 DIV块中 元素垂直居中 作者:知乎用户链接:https://www.zhihu.com/question/20543196/answer/99429177来源:知乎著作权归作者所有.商业转载请联 ...

  3. CSS子元素在父元素中水平垂直居中的几种方法

    1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...

  4. img标签在div中水平垂直居中--两种实现方式

    第一种方式: text-align:center; vertical-align:middle; div{ text-align: center; vertical-align:middle;widt ...

  5. css实现高度不固定的div元素模块在页面中水平垂直居中

    <!DOCTYPE html><html>    <head>        <title>Laravel</title> <link ...

  6. 【div+css】两个div,如何让内层的div在外层div中水平垂直居中

    好久没有写样式,很是很生疏 ==================================================================== 方法1: .parent { wi ...

  7. p标签在div中水平垂直居中且文本左对齐

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. img图片自适应div盒子,前提是不要把盒子的高给写死了,就是不要写高,如下

    div{width:100%;}//写高就自适应盒子不起来了 img{width: 100%; height: 100%;}

  9. div 里面内容水平垂直居中

    css .main{ background: #999999; width: 600px; height: 400px; /*采用flex方式*/ display: flex; /*div内容垂直居中 ...

随机推荐

  1. 前端小课堂 js:what is the function?

    js 函数: 概念:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 说白了就是响应用户操作所执行的代码,通过js事件触发,然后调用执行函数里代码的操作. 比如常见的用户点击事件,用户点击 ...

  2. 好记性不如烂笔头-nginx安装环境与Linux安装ftp组件

    Nginx安装环境 1. Nginx安装环境 Nginx是C语言开发,建议在linux上运行,我参加工作这些年来一直使用Linux发行版之一的 Centos作为安装环境. 1.1 gcc 安装Ngin ...

  3. 数据库系统异常排查之DMV(转)

    来源: http://www.cnblogs.com/fygh/archive/2012/03/12.html 数据库系统异常是DBA经常要面临的情景,一名有一定从业经验的DBA,都会有自己一套故障排 ...

  4. 基于 Azure 托管磁盘配置高可用共享文件系统

    背景介绍 在当下,共享这个概念融入到了人们的生活中,共享单车,共享宝马,共享床铺等等.其实在 IT 界,共享这个概念很早就出现了,通过 SMB 协议的 Windows 共享目录,NFS 协议的网络文件 ...

  5. Python中深浅拷贝 垃圾回收与 super继承(六)

    1 python拷贝 深拷贝,浅拷贝 与引用三者的区别 import copy a = [1, 2, 3, 4, ['a', 'b']] #原始对象 b = a #赋值,传对象的引用 c = copy ...

  6. 在一个服务中实现 多个契约 和终结点 z

    一个服务作为一系列终结点被定义的.每个终结点都有一个地址,绑定和契约.契约就是暴露终结点能力的.地址就是这些应用或服务从网络的哪个地址可找到,契约是关于如何访问他们的. 在终结点和契约间有一对多的关系 ...

  7. Linux中基于apache httpd的svn服务器搭建与配置

    mod_dav_svn是apache连接svn的模块 yum install subversion mod_dav_svn httpd 配置文件简单说明, SVNParentPath 说明可以在指定的 ...

  8. JZ2440学习笔记之通过J-Link单步裸机程序(Keil+J-Link)

    我们还是使用JZ2440学习笔记之第一个裸机程序(Keil-MDK)里面的程序,但是把延时拿掉,要不然单步的时候一直在delay里面: int main(void) { // Set GPF4/5/6 ...

  9. 融云SDK:获取用户Token的方法

    融云SDK查看ServerAPI里面有个获取Token的方法,本以为只要传三个参数就可以.后来发现,在请求头有几个必须要传的参数,否则服务器返回401(未授权).拿获取Token接口为例子 如图所示, ...

  10. 用js写三级联动

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