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 相关文章推荐
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
js文件包含的几种方式介绍
Sep 28 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
JS动态增删表格行的方法
Mar 03 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
详解react服务端渲染(同构)的方法
Sep 21 Javascript
原生实现一个react-redux的代码示例
Jun 08 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 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实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
Prototype中dom对象方法汇总
2008/09/17 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
2015/08/11 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
layui的select联动实现代码
2019/09/28 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
Django管理员账号和密码忘记的完美解决方法
2018/12/06 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
python飞机大战游戏实例讲解
2020/12/04 Python
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
企业职业病防治方案
2014/05/29 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书