让图片在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内容垂直居中 ...
随机推荐
- Word中划线的方法(五种)
Word中划线的方法(五种): 1. 按CTRL+F9,在出现的黑底花括号内,如图输入内容, 最后按SHIFT+F9(或者右键菜单点切换域代码),以后可以反复按ALT+F9在代码与结果之间切换. 注: ...
- Siebel 基础入门--权限控制
企业应用最基本的要求就是只授予用户在他工作职责范围内的权限,一般而言,这种权限都包含两种,一种是对于相应的功能的可见性(或者形象地说,菜单的可见 性,这个是应用层面界面的,这种权限在Siebel里称为 ...
- XP无法访问SharePoint 2010的问题
最近用户反馈XP系统的电脑无法访问SharePoint 2010系统,换成了火狐浏览器后可以正常访问,但是在上传附件时出现异常,支持人员给的解决方案是换操作系统,要换成win7. 但是因为工作原因,不 ...
- Azure 9 月新发布
亲爱的小伙伴们, 我们很高兴向您宣布以下新功能与相关调整,欢迎关注与使用. 1. SQL 数据库弹性池 2. 存储指标更新 3. SQL 数据库 P15 4. Azure 高级存储 5. Wosig ...
- (三)svn 服务器端之创建仓库
创建仓库 svn服务端创建完成需要创建仓库,仓库中存放 要被管理的文件. 通过开始菜单进入 VisualSVN server manager: 主界面为: 右键点击Repositories创建仓库 ...
- 再学UML-Bug管理系统UML2.0建模实例(三)
3.系统设计 在对系统进行全面分析后,我们开始使用UML对系统进行设计,构造BMS系统的设计模型,包括类图.包图.顺序图(实现模型).组件图和部署图等的绘制,回答了“怎么做”的问题.具体设计工作如下: ...
- 一个自动生成awr报告的shell脚本
最近在学习shell编程,搞一点点小工具自动完成awr报告的收集工作,方便系统出现问题时问题排查.脚本内容如下,系统收集每天开始时间6点结束时间20点的awr报告并存储在/u01/shell_t/aw ...
- IOS PushMeBaby(是一款用来测试ANPs的开源Mac项目)
● PushMeBaby是一款用来测试ANPs的开源Mac项目 ● 它充当了服务器的作用,用法非常简单 ● 它负责将内容提交给苹果的APNs服务器,苹果的APNs服务器再将内容推送给用户 的设备 ● ...
- Arcgis for Android 空间数据WKT与JSON描述
点线面数据标准格式 一. 点 WKT: POINT(-118.4 -45.2) JSON: { "x": -118.4, "y": -45.2, "s ...
- 从零开始Vue项目实战(二)-搭建环境
1.下载node.js并安装 下载地址:https://nodejs.org/en/download/. 下载.msi 格式的直接连续下一步就可以了.安装完成后可以用 node -v 和 npm -v ...