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

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. Word中划线的方法(五种)

    Word中划线的方法(五种): 1. 按CTRL+F9,在出现的黑底花括号内,如图输入内容, 最后按SHIFT+F9(或者右键菜单点切换域代码),以后可以反复按ALT+F9在代码与结果之间切换. 注: ...

  2. Siebel 基础入门--权限控制

    企业应用最基本的要求就是只授予用户在他工作职责范围内的权限,一般而言,这种权限都包含两种,一种是对于相应的功能的可见性(或者形象地说,菜单的可见 性,这个是应用层面界面的,这种权限在Siebel里称为 ...

  3. XP无法访问SharePoint 2010的问题

    最近用户反馈XP系统的电脑无法访问SharePoint 2010系统,换成了火狐浏览器后可以正常访问,但是在上传附件时出现异常,支持人员给的解决方案是换操作系统,要换成win7. 但是因为工作原因,不 ...

  4. Azure 9 月新发布

    亲爱的小伙伴们, 我们很高兴向您宣布以下新功能与相关调整,欢迎关注与使用. 1. SQL 数据库弹性池  2. 存储指标更新 3. SQL 数据库 P15 4. Azure 高级存储 5. Wosig ...

  5. (三)svn 服务器端之创建仓库

    创建仓库 svn服务端创建完成需要创建仓库,仓库中存放 要被管理的文件. 通过开始菜单进入  VisualSVN server manager: 主界面为: 右键点击Repositories创建仓库 ...

  6. 再学UML-Bug管理系统UML2.0建模实例(三)

    3.系统设计 在对系统进行全面分析后,我们开始使用UML对系统进行设计,构造BMS系统的设计模型,包括类图.包图.顺序图(实现模型).组件图和部署图等的绘制,回答了“怎么做”的问题.具体设计工作如下: ...

  7. 一个自动生成awr报告的shell脚本

    最近在学习shell编程,搞一点点小工具自动完成awr报告的收集工作,方便系统出现问题时问题排查.脚本内容如下,系统收集每天开始时间6点结束时间20点的awr报告并存储在/u01/shell_t/aw ...

  8. IOS PushMeBaby(是一款用来测试ANPs的开源Mac项目)

    ● PushMeBaby是一款用来测试ANPs的开源Mac项目 ● 它充当了服务器的作用,用法非常简单 ● 它负责将内容提交给苹果的APNs服务器,苹果的APNs服务器再将内容推送给用户 的设备 ● ...

  9. Arcgis for Android 空间数据WKT与JSON描述

    点线面数据标准格式 一. 点 WKT: POINT(-118.4 -45.2) JSON: { "x": -118.4, "y": -45.2, "s ...

  10. 从零开始Vue项目实战(二)-搭建环境

    1.下载node.js并安装 下载地址:https://nodejs.org/en/download/. 下载.msi 格式的直接连续下一步就可以了.安装完成后可以用 node -v 和 npm -v ...