css图片在盒子里居中,让图片在div盒子中水平垂直居中

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

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";

}

}

}

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

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

DIV块中 元素垂直居中

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

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

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

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

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

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

Laravel

【div&plus;css】两个div，如何让内层的div在外层div中水平垂直居中

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

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

...

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

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

div 里面内容水平垂直居中

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

随机推荐

完美卸载oracle11g步骤

完美卸载oracle11g步骤:1. 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务.2. 开始->程序->Oracle - OraHome ...

记一本关于thinkphp&amp&semi;&amp&semi;MVC的好书

看过好多书,写thinkphp就蜻蜓点水般,而且语言比较书面.看到了李开涌写的php mvc开发实战.他本人是技术方面的专家,写的书结合了对技术的理解.我读起来感觉收获颇多.比如model这块,我一直 ...

Python文件处理之文件写入方式与写缓存(三)

Python的open的写入方式有: write(str):将str写入文件 writelines(sequence of strings):写多行到文件,参数为可迭代对象 首先来看下writelin ...

恢复SD卡错删数据

对于众多米粉来说,手机里存储的很多资料都非常宝贵,如果不小心删除了,想要重新收集这些资料就显得非常困难.有道是千金易得,数据无价,特别是一些珍贵照片之类的充满回忆的数据,丢失了甚至会抱憾 ...

Activity的&quot&semi;singleTask&quot&semi;之谜

官方文档称 以这种方式启动的Activity总是属于一个任务的根Activity.果真如此吗?本文将为你解开Activity的"singleTask"之谜. 任务(Task)是个什 ...

Linq 入门 顺带 Func与Action

Linq的优点: 查询是一种从数据源检索数据的表达式. 查询通常用专门的查询语言来表示. 随着时间的推移,人们已经为各种数据源开发了不同的语言:例如,用于关系数据库的 SQL 和用于 XML 的 XQ ...

SQLServer中间接实现函数索引或者Hash索引

本文出处:http://www.cnblogs.com/wy123/p/6617700.html SQLServer中没有函数索引,在某些场景下查询的时候要根据字段的某一部分做查询或者经过某种计算之后 ...

【Django】 初步学习

这个系列(或者成不了一个系列..)预计会全程参考Vamei様的Django系列,膜一发.说句题外话,其实更加崇拜像Vamei那样的能够玩转生活.各个领域都能取得不小成就的人. [Django] ■ 概 ...

线性表-&gt&semi;链式存储-&gt&semi;线形链表&lpar;单链表&rpar;

文字描述: 为了表示前后两个数据元素的逻辑关系,对于每个数据元素,除了存储其本身的信息之外(数据域),还需存储一个指示其直接后继的信息(即直接后继的存储位置,指针域). 示意图: 算法分析: 在单链表 ...