让图片在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";
}
}
}
让图片在div盒子中水平垂直居中的更多相关文章
- CSS实现图片在div a标签中水平垂直居中
CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...
- 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元素模块在页面中水平垂直居中
<!DOCTYPE html><html> <head> <title>Laravel</title> <link ...
- 【div+css】两个div,如何让内层的div在外层div中水平垂直居中
好久没有写样式,很是很生疏 ==================================================================== 方法1: .parent { wi ...
- p标签在div中水平垂直居中且文本左对齐
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- img图片自适应div盒子,前提是不要把盒子的高给写死了,就是不要写高,如下
div{width:100%;}//写高就自适应盒子不起来了 img{width: 100%; height: 100%;}
- div 里面内容水平垂直居中
css .main{ background: #999999; width: 600px; height: 400px; /*采用flex方式*/ display: flex; /*div内容垂直居中 ...
随机推荐
- 10th week task -3 Arrow function restore
Arrow function restore 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { r ...
- JavaScript数组求和
<script> function demo(){ var d=document.getElementsByTagName("input")[0].value.spli ...
- 菜鸟学习Spring——SpringMVC注解版将URL中的参数转成实体
一.概述 将URL中参数转成实体在我们项目中用的很多比如界面提交表单请求后台的Contorller的时候通过URL传递了一串参数到后台,后台通过Spring让界面的字段与实体的字段映射来实现给后台的实 ...
- .NET开源工作流RoadFlow-表单设计-附件管理
在表单中添加一个附件管理的控件: 文件类型:指定可以上传的文件类型.
- 再学UML-深入浅出UML类图(一)
在UML 2.0的13种图形中,类图是使用频率最高的UML图之一.Martin Fowler在其著作<UML Distilled: A Brief Guide to the Standard O ...
- Linux xclock打不开时钟终端
一般执行该操作的都是在安装oracle数据库或其他应用时,需要测试是否可以正常弹层执行的: 网络关于这个的描述和处理大片片的,但是符合自己实际情况的,还是需要直接去确认: 两步处理: 第一步: 使用r ...
- April 1 2017 Week 13 Saturday
There is more to life than increasing its speed. 生活不仅仅是匆匆赶路. Get a life, a real life, not a manic pu ...
- zt dup() 和 dup2()
dup() 和 dup2() 2011-10-07 11:06:31| 分类: Linux学习心得 |字号 订阅 dup和dup2都可用来复制一个现存的文件描述符,使两个文件描述符指向同一个fi ...
- windows10 、eclipse kepler配置maven环境
maven环境的配置需要先配置Java环境. 一.在wIn10 中配置maven环境,需要先下载maven压缩包,官网http://maven.apache.org/download.cgi,我选择下 ...
- 新手理解HTML、CSS、javascript之间的关系-修订
几年前写过一篇博文 <新手理解HTML.CSS.javascript之间的关系>,没想到网上出现了不少转载,当时没有太用心,里面的很多内容有待商榷,这里发布重新发布一篇. 网页主要有三部分 ...