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 相关文章推荐
jquery时间下拉框小例子
Apr 15 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
一个不错的字符串转码解码函数(自写)
Jul 31 Javascript
jquery+ajax请求且带返回值的代码
Aug 12 Javascript
JS字符串的切分用法实例
Feb 22 Javascript
jQuery自定义数值抽奖活动代码
Jun 11 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 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 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
网页常用特效代码整理
2006/06/23 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
2017/02/14 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
使用Python获取Linux系统的各种信息
2014/07/10 Python
Python字符串和文件操作常用函数分析
2015/04/08 Python
一些Python中的二维数组的操作方法
2015/05/02 Python
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
Ubuntu 下 vim 搭建python 环境 配置
2017/06/12 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
python3 pillow模块实现简单验证码
2019/10/31 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
水利学院求职自荐书
2014/02/01 职场文书
初中校园广播稿
2014/02/02 职场文书
儿童生日会策划方案
2014/05/15 职场文书
临床医学专业求职信
2014/08/08 职场文书
《角的度量》教学反思
2016/02/18 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python