博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS让任意图片垂直水平居中且页面不滚动
阅读量:6123 次
发布时间:2019-06-21

本文共 1776 字,大约阅读时间需要 5 分钟。

 说一下以前遇到的一个问题:

       假设有一张小图,要实现点击查看大图的功能,而这个图的宽高可能会超过浏览器的宽高,这时候我们通过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; } } }

转载于:https://www.cnblogs.com/Man-Dream-Necessary/p/7000798.html

你可能感兴趣的文章
极客Web前端开发资源大荟萃#001
查看>>
让div固定在某个位置
查看>>
Java开发环境Docker镜像
查看>>
从无到有,WebService Apache Axis2初步实践
查看>>
任务调度(一)——jdk自带的Timer
查看>>
UIKit框架(15)PCH头文件
查看>>
整理看到的好的文档
查看>>
Linux磁盘管理和文件系统管理
查看>>
linux运维人员的成功面试总结案例分享
查看>>
Windows DHCP Server基于MAC地址过滤客户端请求实现IP地址的分配
查看>>
命令查询每个文件文件数
查看>>
《跟阿铭学Linux》第8章 文档的压缩与打包:课后习题与答案
查看>>
RAC表决磁盘管理和维护
查看>>
HDU 3622 Bomb Game(二分+2-SAT)
查看>>
Apache通过mod_php5支持PHP
查看>>
发布一个TCP 吞吐性能测试小工具
查看>>
java学习:jdbc连接示例
查看>>
PHP执行批量mysql语句
查看>>
Extjs4.1.x 框架搭建 采用Application动态按需加载MVC各模块
查看>>
Silverlight 如何手动打包xap
查看>>