JS让任意图片垂直水平居中且页面不滚动
说一下以前遇到的一个问题:
假设有一张小图,要实现点击查看大图的功能,而这个图的宽高可能会超过浏览器的宽高,这时候我们通过JS来改变图片的宽高,从而实现图片在浏览器居中显示且不滚屏。
方法如下:
首先你要给小图添加一个点击事件,不多赘述。
showBigImg(e) {
let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
if (e.target.naturalHeight && e.target.naturalWidth) {
const naturalHeight = e.target.naturalHeight;
const naturalWidth = e.target.naturalWidth;
const rh = h - naturalHeight;//浏览器视图宽度-图片宽度=rh
const rw = w - naturalWidth;//浏览器视图高度-图片高度=rw
if (rh >= 0 & rw >= 0) {//图片宽高未超出浏览器视图宽高
cimg.style.height = "auto";
cimg.style.width = "auto";
cimg.style.top = rh / 2 + "px";
cimg.style.left = rw / 2 + "px";
} else if (rh >= 0 & rw < 0) {//图片宽度超出浏览器视图宽度,且高度未超出浏览器视图高度,将图片的宽度改变为浏览器视图宽度,图片的宽度等比例缩小
cimg.style.width = w + "px";
cimg.style.height = "auto";
cimg.style.left = 0;
let newrh = h - cimg.offsetHeight;//浏览器视图宽度-改变后图片高度=newrh
cimg.style.top = newrh / 2 + "px";
} else if (rh < 0 & rw >= 0) {//图片高度超出浏览器视图高度,且宽度未超出浏览器视图宽度,将图片的高度改变为浏览器视图高度,图片的宽度等比例缩小
cimg.style.height = h + "px";
cimg.style.width = "auto";
let newrw = w - cimg.offsetWidth;//浏览器视图宽度-改变后图片宽度=newrw
cimg.style.left = newrw / 2 + "px";
cimg.style.top = 0;
} else {//图片宽高均超出浏览器视图宽高,将图片宽高改变为浏览器视图宽高
cimg.style.width = w + "px";
cimg.style.height = h + "px";
cimg.style.left = 0;
cimg.style.top = 0;
}
}
}
JS让任意图片垂直水平居中且页面不滚动的更多相关文章
- js实现未知宽高的元素在指定元素中垂直水平居中
js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...
- CSS之文本溢出隐藏,不定宽高元素垂直水平居中、禁止页面文本复制
1.如何让不固定元素宽高的元素垂直水平居中 .center { position: absolute; top: 50%; left: 50%; background-color: #000; wid ...
- div+css实现未知宽高元素垂直水平居中
div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...
- CSS之垂直水平居中的背后
最开始,我想说,这个体系有点大,我写的并不好.就当作是一个思路吧,虽然这个思路有点乱.几乎每一个实现方案的背后都是该属性及其组合的原理,每一个都要剖析其规范细节的话,这篇文章绝不会是这样的篇幅,所以每 ...
- css3之transform属性实现div不定宽高垂直水平居中
transform的作用 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜.(w3cschool) transform的兼容性 transfor ...
- transform的妙用---实现div不定宽高垂直水平居中
transform的兼容性 transform的兼容性还是比较乐观的.IE9以下不兼容,IE9支持代替的-ms-transform属性不过只支持2D转换. 谷歌和Safari支持代替的-webkit- ...
- 在各浏览器和各分辨率下如何让div内的table垂直水平居中?
本文主要针对需要全屏显示的系统页面内,因为系统经常会用到表格table布局,偶尔的table需要显示在div的正中间,所以鄙人特此总结下div内table的万千姿态. <!DOCTYPE htm ...
- 纯CSS实现元素垂直水平居中-非固定宽度
这里不讨论行内元素的居中!! 盒子垂直居中+水平居中的需求时经常遇到的,看到的较多实现逻辑是固定content-box的宽度,通过让margin-left和margin-top等于宽或高的负一半来实现 ...
- CSS垂直水平居中方法总结
在布局的时候经常能用到居中,在此总结一下 html结构: <div class="wrap"> <div class="content"> ...
随机推荐
- MR执行流程
1.Map任务处理 1.1 读取HDFS中的文件.每一行解析成一个<k,v>.每一个键值对调用一次map函数. <0,hello you> <10,hello me& ...
- python 装饰器 回顾 及练习
# 复习 # 讲作业 # 装饰器的进阶 # functools.wraps # 带参数的装饰器 # 多个装饰器装饰同一个函数 # 周末的作业 # 文件操作 # 字符串处理 # 输入输出 # 流程控制 ...
- spring boot踩坑记
Resolved exception caused by handler execution: org.springframework.http.converter.HttpMessageNotWri ...
- 新版IdFTP解决中文乱码问题
用XE10后开发FTP客户端,发现有中文乱码问题.这里也主要是编码的问题,在connect链接后,需要设置编码方可. 注意: IndyTextEncoding_OSDefault; 该代码可能需 ...
- Hibernate-ORM:12.Hibernate中的多对多关联关系
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客将讲述Hibernate中的多对多关联关系的操作,准备的篇幅较少,望海涵 一,讲述多对多 多对多的关联 ...
- 引用外部静态库(.a文件)时或打包.a时,Category方法无法调用。崩溃
我的这个是MJRefresh,学习打.a包Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: ...
- Django笔记 —— 表单(form)
最近在学习Django,打算玩玩网页后台方面的东西,因为一直很好奇但却没怎么接触过.Django对我来说是一个全新的内容,思路想来也是全新的,或许并不能写得很明白,所以大家就凑合着看吧- 本篇笔记(其 ...
- Ubuntu 安装Google浏览器
Ubuntu自带的浏览器是火狐浏览器,使用的时候多多少少有些不方便,这里安装Googel浏览器. 下载 可以到 Ubuntu chrome去下载安装包. 安装 首先到下载的根目录 cd ~/Downl ...
- Python-学习-项目1-即时标记-1
买了一本Python入门,奈何看不下去,只能是先看后面的项目,看到那里不懂的时候在回去学习. 项目名字:即时标记 大致的意思就是把一个纯文本文件标记成自己想要的格式文件. 首先就是待处理文本,我找不到 ...
- Word2vec之CBOW
一.Word2vec word2vec是Google与2013年开源推出的一个用于获取word vecter的工具包,利用神经网络为单词寻找一个连续向量看空间中的表示.word2vec是将单词转换为向 ...