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 option location 页面跳转实现代码
Dec 27 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
最全面的百度地图JavaScript离线版开发
Sep 10 Javascript
javascript实现文字无缝滚动
Dec 27 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
浅谈Vue.use的使用
Aug 29 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
php开发工具有哪五款
2015/11/09 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
2019/04/08 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
Python线程详解
2015/06/24 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
python下载微信公众号相关文章
2019/02/26 Python
总结python中pass的作用
2019/02/27 Python
Pytorch 实现权重初始化
2019/12/31 Python
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
自动化专业本科毕业生求职信
2013/10/20 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
人力管理专业毕业生求职信
2014/02/27 职场文书
开业典礼主持词
2014/03/21 职场文书
学校安全责任书范本
2014/07/23 职场文书
党支部创先争优承诺书
2014/08/30 职场文书
优秀团员事迹材料
2014/12/25 职场文书
投诉信范文
2015/07/02 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
python实现简单区块链结构
2021/04/25 Python