//调整多个图像，使得图像水平垂直地位于中央
功能调整img
letimgdiv=document.getelementsbyclassname (' img )； 找到//img标签外的名为img的class div框
for(letI=0； i imgDiv.length； I ) {
//console.log(I；
letobj=img div [ I ].getelementsbytagname (' img ' ) )0)；
确认if(obj.complete )//图像读取已完成
let imgH=obj.offsetHeight；
let imgW=obj.offsetWidth；
let img_scale=imgW/imgH；
letboxh=obj.parent node.offsetheight；
letboxw=obj.parent node.offsetwidth；
let box_scale=boxW/boxH；
//console.log (imgh=' imgh ' imgw=' imgw ' boxh=' boxh ' boxw=' boxw )；
if(box_scaleimg_scale ) {
obj.style.width='100% '；
imgH=obj.offsetHeight；
imgW=obj.offsetWidth；
leth=(imgh-Boxh )/2；
obj.style.marginTop=-h 'px '； //确保图像垂直居中
}else{
obj.style.height='100% '；
imgH=obj.offsetHeight；
imgW=obj.offsetWidth；
letw=(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；
letboxh=obj.parent node.offsetheight；
letboxw=obj.parent node.offsetwidth；
let box_scale=boxW/boxH；
//console.log (imgh=' imgh ' imgw=' imgw ' boxh=' boxh ' boxw=' boxw )；
if(box_scaleimg_scale ) {
obj.style.width='100% '；
imgH=obj.offsetHeight；
imgW=obj.offsetWidth；
leth=(imgh-Boxh )/2；
obj.style.marginTop=-h 'px '；
}else{
obj.style.height='100% '；
imgH=obj.offsetHeight；
imgW=obj.offsetWidth；
letw=(imgw-boxw )/2；
obj.style.marginLeft=-w 'px '；
() ) ) ) )。
(；
//obj.style.height='100% '；
//obj.style.margin='0 auto '；
() ) ) ) )。
() ) ) ) )。
() ) ) ) )。
CSS安装图像为div a标签，水平、垂直、中央
CSS安装图像为div a标签，水平、垂直、中央
DIV块中元素的垂直居中
1 DIV区块中元素的垂直方向中央的作者：知乎用户链接3360https://www.zhi Hu.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元素模块在页面中水平垂直居中
Laravel【div+css】两个div，如何让内层的div在外层div中水平垂直居中
好久没有写样式,很是很生疏 ==================================================================== 方法1: .parent { wi ...
p标签在div中水平垂直居中且文本左对齐
...img图片自适应div盒子，前提是不要把盒子的高给写死了，就是不要写高，如下
div{width:100%;}//写高就自适应盒子不起来了 img{width: 100%; height: 100%;}
div 里面内容水平垂直居中
css .main{ background: #999999; width: 600px; height: 400px; /*采用flex方式*/ display: flex; /*div内容垂直居中 ...
随机推荐
完美卸载oracle11g步骤
完美卸载oracle11g步骤:1. 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务.2. 开始->程序->Oracle - OraHome ...
记一本关于thinkphp&;&;MVC的好书
看过好多书,写thinkphp就蜻蜓点水般,而且语言比较书面.看到了skdzt写的php mvc开发实战.他本人是技术方面的专家,写的书结合了对技术的理解.我读起来感觉收获颇多.比如model这块,我一直 ...
Python文件处理之文件写入方式与写缓存(三)
Python的open的写入方式有: write(str):将str写入文件 writelines(sequence of strings):写多行到文件,参数为可迭代对象 首先来看下writelin ...
恢复SD卡错删数据
对于众多米粉来说,手机里存储的很多资料都非常宝贵,如果不小心删除了,想要重新收集这些资料就显得非常困难.有道是千金易得,数据无价,特别是一些珍贵照片之类的充满回忆的数据,丢失了甚至会抱憾 ...
Activity的";singleTask";之谜
官方文档称 以这种方式启动的Activity总是属于一个任务的根Activity.果真如此吗?本文将为你解开Activity的"singleTask"之谜. 任务(Task)是个什 ...
Linq 入门 顺带 Func与Action
Linq的优点: 查询是一种从数据源检索数据的表达式. 查询通常用专门的查询语言来表示. 随着时间的推移,人们已经为各种数据源开发了不同的语言:例如,用于关系数据库的 SQL 和用于 XML 的 XQ ...
SQLServer中间接实现函数索引或者Hash索引
本文出处:http://www.cnblogs.com/wy123/p/6617700.html SQLServer中没有函数索引,在某些场景下查询的时候要根据字段的某一部分做查询或者经过某种计算之后 ...
【Django】 初步学习
这个系列(或者成不了一个系列..)预计会全程参考Vamei様的Django系列,膜一发.说句题外话,其实更加崇拜像Vamei那样的能够玩转生活.各个领域都能取得不小成就的人. [Django] ■ 概 ...
线性表->;链式存储->;线形链表(单链表)
文字描述: 为了表示前后两个数据元素的逻辑关系,对于每个数据元素,除了存储其本身的信息之外(数据域),还需存储一个指示其直接后继的信息(即直接后继的存储位置,指针域). 示意图: 算法分析: 在单链表 ...