CSS图片响应式 垂直水平居中


Posted in Javascript onAugust 14, 2015

我看最近微博流行CSS居中技术,我看了几编资料写的都不多好,于是抽时间把相关资料整合了,具体内容如下。

点击此处下载源码

效果展示:

CSS图片响应式 垂直水平居中

要求:

1.尽可能兼容更多浏览器,这里兼容到ie7,ie6不支持max-*就不考虑了。

2.浏览器尺寸变化时,图片总是等比例拉伸或缩放。

3.包裹图片的div也是响应式的,并且每个div的尺寸是一样的。

4.图片始终保持水平垂直居中。

5.图片的行列数不变,这里一直都是3*3.

下面来搞定一个个要求。

满足要求1意味着这里要尽量不使用高级浏览器才有的属性,比如高级浏览器居中常用的什么

display:table-cell;vertical-align;center;
flexbox
transform

。。。

如果不得不用这些属性,也必须要有兼容低版本浏览器的替代方案。

要求2中图片等比拉伸缩放在响应式设计中很容易搞定。

直接对图片img{max-width: 100%;}就可以了。外面的宽度就算设成比图片宽度小的尺寸,图片会填满外面div,同时等比例的计算出图片这时该有的高度。

CSS图片响应式 垂直水平居中

可以看到图片尺寸是640*480(4:3),外面div设成300px,图片尺寸这时变为300*225(4:3).

然后是要求2里面的浏览器尺寸变化。这个也容易,把外面div的宽度写成百分百就可以了。

CSS图片响应式 垂直水平居中

可以看到不管外面div尺寸怎么变,图片的宽高比始终没变。

然后是要求3,外面div响应式。

第一反应是把尺寸设置成百分百。比如最上面的效果,一行有三张图片。把每个包裹图片的div宽度设成33.3%;那这时div还会像里面的图片一样,等比例缩放或拉伸,div的高度就会参差不齐。

<div id='wrap'>
  <ul>
   <li>
    <p><img src="1.jpg"></p>
   </li>
      .....
  </ul>
 </div>

*{
  margin: 0;
  padding:0;
 }
 li{
  list-style-type: none;
  display:inline-block;
  vertical-align: middle;
  max-width: 200px;
  width: 32%;
  border:1px solid red;
 }
 img{
  max-width: 100%;
  max-height: 100%;
  display: inline-block;
  vertical-align: middle;
 }
 #wrap{
  max-width: 620px;
  font-size: 0;
 }

CSS图片响应式 垂直水平居中

可以看到第一张图片的高度已经超过200px,因为第一张图片是宽度小于高度,很显然这时应该以高度为基准,宽度等比例缩放。如果在图片父元素加overflow:hidden;就看不到大猪的猪脚了。

那么到底怎么做才能让外面div响应式?

padding-top:100%;

<div id='wrap'>
  <ul>
   <li>
    <div class="dummy"></div>
   </li>
      ...
  </ul>
 </div>
 
 *{
  margin: 0;
  padding:0;
 }
 li{
  list-style-type: none;
  float: left;
  display: block;
  max-width: 200px;
  width: 32%;
  border:1px solid red;
 }
 .dummy{
  padding-top: 100%;
 }
 #wrap{
  max-width: 620px;
  font-size: 0;
 }

CSS图片响应式 垂直水平居中

这里宽高比是1:1.如果宽高比是4:3,就设成padding-top: 75%;,其他的以此类推。

要求3是搞定,下面是要求4。

先把图片放进去。

CSS图片响应式 垂直水平居中

这时让图片脱离文档流,并把图片整个铺满。

img{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
  border: 2px solid blue;
 }

同时把包裹图片div position:relative;

CSS图片响应式 垂直水平居中

注意到上面图片margin:0 auto;,已经可以水平居中了。

下面就只差一个图片垂直居中了,要求5只需在最外面div设置一个max-width就可以设置一行的列数了。

垂直居中有很多方法,但是这里图片position:absolute;,很容易想到设置margin:auto;padding:auto;就可以让脱离文档流的图片水平垂直居中。参见Absolute Horizontal And Vertical Centering In CSS。

CSS图片响应式 垂直水平居中

但是这种方法对ie7无效。因此只有在图片外面再加一层div.

这里本?庞玫氖呛艹<?囊恢执怪本又械姆椒ā?/p>

<li>
    <div class="dummy"></div>
    <p><img src="1.jpg"><i></i></p>
   </li>
 img{
  max-width: 100%;
  max-height: 100%;
  display: inline-block;
  vertical-align: middle;
 }
 i{
  display: inline-block;
  vertical-align: middle;
  height:100%;
 }

注意,这时<p>标签要设置height:100%.否则在ie7中,<i>标签没有可以参照的高度,使得它无法达到和外部容器一样的高度。

以上内容是本文针对CSS图片响应式 垂直水平居中的全部内容,希望大家喜欢。

Javascript 相关文章推荐
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
javascript html5实现表单验证
Mar 01 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
React-Native使用Mobx实现购物车功能
Sep 14 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
js实现选中复选框文字变色的方法
Aug 14 #Javascript
avalon js实现仿微博拖动图片排序
Aug 14 #Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 #Javascript
freemarker判断对象是否为空的方法
Aug 13 #Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
Aug 13 #Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 #Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 #Javascript
You might like
php实现的返回数据格式化类实例
2014/09/22 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
JavaScript 的方法重载效果
2009/08/07 Javascript
jquery阻止冒泡事件使用模拟事件
2013/09/06 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
jquery实现拖动效果
2016/08/10 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
浅谈Vuex的状态管理(全家桶)
2017/11/04 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
[00:16]热血竞技场
2019/03/06 DOTA
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
Python模拟用户登录验证
2017/09/11 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
文秘求职信范文
2014/04/10 职场文书
党的作风建设心得体会
2014/10/22 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
2015年学校工作总结范文
2015/04/20 职场文书