让图片在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内容垂直居中 ...
随机推荐
- 基本算法思想Java实现的详细代码
基本算法思想Java实现的详细代码 算法是一个程序的灵魂,一个好的算法往往可以化繁为简,高效的求解问题.在程序设计中算法是独立于语言的,无论使用哪一种语言都可以使用这些算法,本文笔者将以Java语言为 ...
- Zygote和System进程的启动过程
##init脚本的启动 +------------+ +-------+ +-----------+ |Linux Kernel+--> |init.rc+-> |app_process| ...
- user purchase behavior:
user purchase behavior: 参考网址: online shopping frequent https://www.bigcommerce.com/blog/ecommerce-tr ...
- maven学习(五)插件和自定义插件
插件是可以配置在settings.xml和pom.xml中的 插件目标: 在了解插件和生命周期的绑定关系之前,先来说一下插件目标.在实际项目构建的过程中,需要经历编译.打包等等许许多多的操作,为每个操 ...
- Java—集合框架List
集合的概念 现实生活中:很多的事物凑在一起 数学中的集合:具有共同属性的事物的总和 Java中的集合类:是一种工具类,就像是容器,存储任意数量的具有共同属性的对象 集合的作用 在类的内部,对数据进行组 ...
- day010-缓冲流、转换流、序列化流
1. 缓冲流 又称为高效流.高效流高效的原理:使用缓冲区(数组)临时存储多个数据,减少底层资源的调用次数.从而提高读写速度. 1.1 缓冲流分类 字节缓冲流: BufferedOutputSt ...
- Struts2学习-拦截器2续
定义拦截器有2种办法:1.实现Interceptor接口2.集成AbstractInterceptor抽象类 一.方法1 ..... <struts> <package name=& ...
- vue-cli3 项目从搭建优化到docker部署
项目地址 vue-cli3-project 欢迎 star 原文地址 https://www.ccode.live/lentoo/list/9?from=art 1. 创建一个vue项目 相信大部分人 ...
- Qt 制作2048小游戏
相信大家都玩过2048把,下面是我用qt写得2048小游戏. 2048.pro HEADERS += \ Widget.h SOURCES += \ Widget.cpp \ main.cpp QT ...
- windows10 、eclipse kepler配置maven环境
maven环境的配置需要先配置Java环境. 一.在wIn10 中配置maven环境,需要先下载maven压缩包,官网http://maven.apache.org/download.cgi,我选择下 ...