让图片在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 java获取凌晨的时间戳
这两天有一个需求是查询用户匹配的推荐信息,包含一个有效时间段,以天为单位,0时0分0秒这种. 通常java中有两种方案: 第一种:Calendar.这种比较简单,也最常见.代码如下: Calendar ...
- Matlab GUI保存图片
% --- Executes on button press in pushbutton5. function pushbutton5_Callback(hObject, eventdata, han ...
- Android学习——ViewPager的使用(一)
这一节介绍使用ViewPager,加载ViewPager主要有三部分,数据源.适配器和ViewPager与适配器关联.其中数据源分为View对象和Fragment对象,这一节先来介绍View对象. 数 ...
- Vue项目中引入ElementUI
前提:创建好的vue项目. 1.安装ElementUI 转到项目根目录,输入命令:#cnpm install element-ui --save-dev 2.在 main.js 引入并注册 impor ...
- day2 数据结构和一些基础知识
请查看我的云笔记链接: http://note.youdao.com/noteshare?id=4171342601326695ec87866e1cc3e410&sub=20CFB149543 ...
- python核心编程中网络爬虫的例子
#!/usr/bin/env python import cStringIO # import formatter # from htmllib import HTMLParser # We use ...
- Windos下Android(ADT Bundle)配置NDK的两种方法------ADT、Cygwin、NDK配置汇总(转)
转自:http://blog.csdn.net/yanzi1225627/article/details/16897877 Android开发环境由windows下ADT Bundle搭建,且按前文h ...
- ArcGIS Server 10 Java 版的Rest服务的部署方法
使用ArcGIS Server 10 Java版发布GIS服务,当使用ArcGIS Manager创建好服务后,然后打开“ArcGIS Services Directory”的链接时发现网页报出了找不 ...
- 2018.11.1 Hibernate中的Mapper关系映射文件
Customer.hbm.xml 基本的参数都在里面了 <?xml version="1.0" encoding="UTF-8"?> <!DO ...
- 2018.10.10 Java的The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path 错误
我们在用Eclipse进行Java web开发时,可能会出现这样的错误:The superclass javax.servlet.http.HttpServlet was not found on t ...