让图片在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内容垂直居中 ...
随机推荐
- 【Android】3.0 Android开发环境的搭建(2)——eclipse
1.0模拟机登录后,可能会一直停留在这个界面很久,那就去洗洗澡.睡睡觉.吃吃饭…… 2.0登录后可以在设置中改成中文,这样界面对国人来说比较友好. 3.0 虚拟机首页可以看到有短信息.拨打电话.浏览器 ...
- pv-err-watch
# pv-err-watch 这是一个前端监控的小工具,提供了多种信息的查询 ## 快速开始 安装`npm install pv-err-watch -S` ```js import errorWat ...
- 多线程(三)~多线程中数据的可见性-volatile关键字
我们先来看一段代码: ①.线程类,用全局布尔值控制线程是否结束,每隔1s打印一次当前线程的信息 package com.multiThread.thread; publicclassPrintStri ...
- 通过 Powershell 来调整 ARM 模式下虚拟机的尺寸
需求描述 在部署完 ARM 模式的虚拟机以后,可以通过 PowerShell 命令来调整虚拟机的尺寸,以下是通过 PowerShell 命令来调整 ARM 模式的虚拟机尺寸. Note 本文只限于 A ...
- 记录项目代码迁移后,UI测试框架的搭建(配置文件的修改、测试脚本试运行)
前文:记录一次项目代码迁移过程 上文代码迁移的目的就是为了新增vue脚手架自带的UI测试框架,工具有了,就需要实践运行在项目中了(修改配置文件.编写测试脚本等). 一.单元测试 测试框架 karma ...
- 实验,暂停oracle后台进程
有时出于测试需求,需要暂停oracle的某些后台进程,此时以暂停lgwr进程为例 使用sysdba连接到数据库查询到LGWR进程的PID:SQL> select prc.pid from v$b ...
- March 26 2017 Week 13 Sunday
Deliver not your words by number but by weight. 言不在多,而在有物. Do more than talk, say something. I still ...
- [EffectiveC++]item31:将文件间的编译依存关系降至最低
P143:“声明的依赖性"替换“定义的依存性”
- selenium定位学习回顾
之前已经专门学过了定位,但后来因为浏览器比较方便,可以直接复制xpath和css进行定位,个人觉得自己快遗忘了这块,所以专门来回顾一下, 顺便记录一下,以便后期查看. 进行web页面自动化测试,对页面 ...
- DEM、DTM和DSM的区别
一.DTM(Digital Terrain Model) 数字地面模型是利用一个任意坐标系中大量选择的已知x.y.z的坐标点对连续地面的一个简单的统计表示,或者说,DTM就是地形表面形态属性信息的数字 ...