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

（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. Stack Overflow 2016年度 20个最佳Python问题（一）

    Stack Overflow 2016年度 20个最佳Python问题(一) https://zhuanlan.zhihu.com/p/25020763

  2. 区间DP(总结)

    学长一晚上的耐心讲解,使我明白区间DP这么高级的东西,还是挺容易的.也就是在一段区间内的动态规划. 下面用例题进行总结. 例题:石子归并. 描述 有N堆石子排成一排,每堆石子有一定的数量.现要将N堆石 ...

  3. HDU 4135：Co-prime（容斥+二进制拆分）

    Co-prime Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total S ...

  4. 【liunx】端口号的占用情况查看

    Linux如何查看端口 1.lsof -i:端口号 用于查看某一端口的占用情况,比如查看8000端口使用情况,lsof -i:8000 # lsof -i:8000 COMMAND PID USER ...

  5. 【网络通讯】Nat知识了解

    一.Nat的含义 NAT(Network Address Translation,网络地址转换)是1994年提出的.当在专用网内部的一些主机本来已经分配到了本地IP地址(即仅在本专用网内使用的专用地址 ...

  6. Makefile在内核编译中的使用

    1.一个配置选项选中多个文件 path:drivers/media/i2c/adv748x adv748x-objs := \ adv748x-afe.o \ adv748x-core.o \ adv ...

  7. GridView 相同单元格合并

    效果如下: 主要代码如下:public class GridDecorator { public static void MergeRows(GridView gridView) { for (int ...

  8. tomcat源码阅读之session管理器（Manager）

    一.UML图分析: (一) Session: Session保存了一个客户端访问服务器时,服务器专门为这个客户端建立一个session用来保存相关的会话信息,session有一个有效时间,这个时间默认 ...

  9. centos7 取消自动锁屏

    CentOS7默认短时间会锁屏,这带来了一定的麻烦,比如看电影时,你不得不时不时的动动鼠标,才能防止锁屏.在网上查了一些资料,也没有找到相关的解决办法,不过最终还是找到了. 1.打开 applicat ...

  10. GitHub10岁之际HanLP自然语言处理包用户量跃居榜首

    在本周,GitHub终于度过了属于它自己的十周岁生日.这个在2008年由3个来自旧金山的年轻人创建的基于Git的代码托管网站,先后超越了元老级的SourceForge和背景强大的Google Code ...