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

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. 【嵌入式】安装Linux系统到开发板

    一.开发板基本介绍 Flash --相当于硬盘 RAM -- 内存 Micro USB或232串口 连电脑 USB 接口连摄像头 启动方式 选择开关 :SD卡启动或NAND FLASH 启动 USB转 ...

  2. 【Leetcode】【Medium】Single Number II

    Given an array of integers, every element appears three times except for one. Find that single one. ...

  3. 再学UML-深入浅出UML类图(二)

    类与类之间的关系(1) 在软件系统中,类并不是孤立存在的,类与类之间存在各种关系,对于不同类型的关系,UML提供了不同的表示方式.       1. 关联关系 关联(Association)关系是类与 ...

  4. 【Hibernate那点事儿】—— Hibernate应该了解的知识

    前言: 最近由于有点时间,就像深入的学习一下Hibernate.之前只是简单的使用,并没领会它的妙处.这里就趁着分享的机会,好好整理一下. 这篇主要讲到了下面几个部分: Hibernate框架 Hib ...

  5. June 14th 2017 Week 24th Wednesday

    Love looks not with the eyes, but with the mind. 爱,不在眼里,而在心中. Staring in her eyes and you will find ...

  6. 构建高性能插件式Web框架

    基于MVC插件模式构建支持数据库集群.数据实时同步.数据发布与订阅的Web框架系统.如下图: 1.基于插件式开发 采用插件模式开发的优点是使得系统框架和业务模式有效地进行分离,系统更新也比较简单,只需 ...

  7. IOS 远程推送通知(UIRemoteNotification)

    ●  什么是远程推送通知 ●  顾名思义,就是从远程服务器推送给客户端的通知(需要联网) ●  远程推送服务,又称为APNs(Apple Push Notification Services) ●   ...

  8. IOS6 的特性 及 autoalyout的作用

    1.如果控件有默认的内容(宽高), 我们只需设置autoalyout的X/Y, autolayout会自动计算出宽高 2.Xcode6将Storyboard变成豆腐干的目的:在Xcode6之前, 如果 ...

  9. 【转】一个Android项目搞定所有主流架构-1.项目介绍和基本MVC架构示例

    http://www.jianshu.com/p/798536fb91c5 项目启发来自谷歌的同类框架项目https://github.com/googlesamples/android-archit ...

  10. 如何学好Spring

    要学好Spring,首先要明确Spring是个什么东西,能帮我们做些什么事情,知道了这些然后做个简单的例子,这样就基本知道怎么使用Spring了.Spring核心是IoC容器,所以一定要透彻理解什么是 ...