下述方法能够解决图片居中问题：

（1）宽一些或者高一些（相对父元素的大小）：图片在父元素的可视范围内显示图片的中间位置

（2）小一些（相对父元素的大小）：图片在父元素的可视范围内居中显示

实现原理：根据图片大小和父元素的大小设置图片的margin-left和margin-top。

下班再写，未完待续

js 解决图片居中问题的更多相关文章

  1. IE/Chrome背景图片居中1px偏移解决方法

    最近在支持行业运营的一个推广页面,遇到了非常规的页面banner图居中的问题,为了解决此问题,做了简单的测试,做了一个小结,为经常做大促页面的兄弟姐妹们提供参考解决方案. 首先来看看现象.最经典的页面 ...

  2. nginx实现动态分离,解决css和js等图片加载问题

    改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...

  3. JS解决通过按钮切换图片的问题

    我是JS初学者,本想通过JS解决轮播图的特效,上网看了下:大部分都是JQ解决的,对于初学者的我来说理解上有点困难.于是我自己只做了一个不那么高大上的JS轮播图,下面我简单介绍下我的步骤:在HTML中创 ...

  4. js判断图片加载完成后获取图片实际宽高

    通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...

  5. 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    html代码: <div id="divPreview"> <img id="imgHeadPhoto" src="Images/H ...

  6. object-fit: 炒鸡方便的图片居中方法

    今天在项目中遇到图片居中的问题,嗯,之前也有写过解决这个问题的文章,有n种方法.不过今天要说一个新的方案:object-fit ,嗯,这个才是真的方便的方案啊. 先看预览: object-fit 只能 ...

  7. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  8. CSS设置图片居中的方法

    如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...

  9. diplay:table-cell和伪元素：after方法让图片居中

    让图片居中和文字居中是不一样的,文字居中可以通过line-height等调整,让图片居中方法,参考各种资料博文和测试  目前接触两种方法 display:table-cell和伪元素:after方法 ...

随机推荐

  1. 转：Oracle日期周详解以及周开始结束时间计算

    目录(?)[-] ORACLE中周相关知识描述 日期格式化函数 日期时间运算函数 根据给定时间取一周的开始时间和结束时间 根据给定周数取一周的开始时间和结束时间 获取一年的最大周次 特别应该注意的地方 ...

  2. HDU 2546：饭卡（01背包）

    饭卡 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submiss ...

  3. Visual Studio Code打造Markdown编辑器

    1.准备工作: OS:Windows10 专业版或企业版 安装:Visua Studio Code,版本 1.23 (2018-5-3) 官网下载:https://github.com/Microso ...

  4. 利用GPU改善程序性能的一点心得

    1.     硬件方面 a. 流处理器个数    Gpu内部的计算单元个数,决定分析模块实时性的关键因素.    实测效果: gtx760  1152个 Gtx960  1024个 单路1080p运动 ...

  5. day11 python学习 函数的建立，返回值，参数

    函数的定义主要有如下要点: def:表示函数的关键字 函数名:函数的名称,日后根据函数名调用函数 函数体:函数中进行一系列的逻辑计算,如:发送邮件.计算出 [11,22,38,888,2]中的最大数等 ...

  6. 完成分析 FastAdmin 用户余额功能（后台篇）

    分析 FastAdmin 用户余额功能(后台篇) 分析 FastAdmin 用户余额功能(后台篇) 虽然 FastAdmin 主要针对后台的框架,但也在不断完善前台的功能,有一天小伙伴在社区里提了一个 ...

  7. 实现JMS规范的ActiveMQ

    ActiveMQ是Apache软件基金会的开源产品,支持AMQP协议.MQTT协议(和XMPP协议作用类似).Openwire协议和Stomp协议等多种消息协议.并且ActiveMQ完整支持JMS A ...

  8. 【转】每天一个linux命令（53）：route命令

    原文网址:http://www.cnblogs.com/peida/archive/2013/03/05/2943698.html Linux系统的route命令用于显示和操作IP路由表(show / ...

  9. 【转】每天一个linux命令（33）：df 命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/12/07/2806483.html linux中df命令的功能是用来检查linux服务器的文件系统的磁盘 ...

  10. hadoop之 心跳时间与冗余快清除

    1.Hadoop datanode节点超时时间设置 datanode进程死亡或者网络故障造成datanode无法与namenode通信,namenode不会立即把该节点判定为死亡,要经过一段时间,这段 ...