文档章节

图片自动缩放、垂直居中在pc端和移动端的解决方法

卢升腾
 卢升腾
发布于 2014/06/02 13:50
字数 1702
阅读 429
收藏 0

    首先来说说图片自动缩放。为什么要自动缩放?原因很现实:

    1、用户不可能每张图片都经过精心的修剪;

    2、有的时候图片的列表页面和详细介绍页面是共用一张大图片,明显,在列表页图片是需要等比缩放为列表可容纳的大小的。

    自动缩放听起来很高端,其实很简单,只需要给图片的父元素设置了高宽度(可以是具体值也可以是百分比),然后再给图片添加“max-width:100%; max-height:100%”属性,浏览器会为我们做其他的幕后工作。

    至于图片垂直居中,网上有很多对此问题的讲述,此处就不一一说明。这里只说说“display:table-cell"这个方法的弊端。如果不清楚这个方法的,请参看“http://jingyan.baidu.com/article/c33e3f48a3615dea15cbb512.html

    "display:table-cell”方法的实现原理是让元素表现为table-cell模拟表格实现居中,因此也带来了和表格一样的问题:自动扩充的问题。当图片小于table高宽度的时候可以很完美的实现居中,但是当图片大于表格的高宽度的时候就会撑开table使table变形。那么,上面不是有了图片自动缩放的办法了么?好的,我们在此实验一下(图片尺寸:590*368):

<table cellpadding="0" cellspacing="0" style="margin:50px auto;">
	<tr>
    	<td align="center" style="width:200px; height:200px; border:1px solid #000;"><img src="images/1.jpg" style="max-height:100%; max-width:100%;" /></td>
    </tr>
</table>

ie7和谷歌:

嗯,很完美,但是看看其他的呢?

ie7+和火狐:

??图片的max-width:100%失效了!真是伤心啊。

    看到这个事实,真是让人丧气啊,不过其实就算是可以实现max-width,我还是不会采用这种方法。因为display:table-cell的办法每次都需要计算font-size的值,而且这个计算出的值还是存在误差的,图片越大误差越大,另外这个方法要求图片的父元素不能浮动,额~~这个实在是太致命了。另外直接使用table标签的话,浮动自然是可以的了,但是我们需要多了几层嵌套——table-tbody-tr-td-img,我仅仅是要做个居中啊~~~   

    好了,下面介绍的两个方法是我在工作中采用的两个方法(也是个人对比过其他一些方法之后选择的兼容性和易写性比较好的办法)。

    首先说说在pc端的图片居中办法。这个办法的中心思路是利用inline-block元素的"vertical-align:middle"属性来实现垂直居中。大家都知道行内块元素"vertical-align:middle"之后,会自动和行内高度最高的兄弟元素实现居中对齐,展示如下。

html:

<ul class="ul">
    <li style="background:#fc0; height:100px;"></li>
    <li style="background:#f00; height:80px;"></li>
    <li style="background:#666; height:50px;"></li>
</ul>

css:

ul{list-style:none;}
ul,li{padding:0; margin:0;}
.ul{margin:50px auto; border:1px solid #000; height:200px; width:200px; text-align:center;}
.ul li{display:inline-block; *display:inline; *zoom:1; vertical-align:middle; width:50px; margin:0 5px;}

    这里是对 li 标签“inline-block”化,由于ie7不支持这个属性,因此需要先“inline”化之后再使用“zoom:1”激活ie7的haslayout

展示:

    那么根据这个实验,我们是不是可以做出这样的一个设想呢——当最高的“li”高度等于“ul”高度的话,剩下那两个“li”是不是就相当于是在“ul”里面垂直居中了呢:

    是的,我们的猜测是正确的!

    好了,讲了那么多,我们就看下最终要实现的效果吧:

html:

<div class="lstimg">
	<img src="images/1.jpg" /><i></i>
</div>

注意:“i”标签和“img”之间不要换行也不要留下空格,不然会在浏览器内解读成4px的空格的哦~~,关于行内元素或者行内块元素之间空格的解读这点浏览器倒是比较统一 ╮(╯_╰)╭

css:

div{height:200px; width:200px; border:1px solid #000; margin:50px auto; padding:0;}
img{border:none;}

/*主要样式*/
.lstimg{text-align:center;}
.lstimg img{vertical-align:middle; max-height:100%; max-width:100%;}
.lstimg i{display:inline-block; height:100%; vertical-align:middle;}

效果:

这个方法也有一个弊端:需要一个空的“i”标签(当然,你可以将“i”标签换成其他任意的行内标签,不要换成块级标签,不然又要苦逼的写一遍针对ie7的hack了),这个空标签本可以使用“:before”或者“:after”伪元素来解决,但是ie7人家不支持哇!如果说你不需要兼容ie7的话,那么或许下一个方法对你来说好哦。

    个人推荐在移动端使用另一种居中办法,(终于离开ie7、8了)。由于这个方法理实践起来没什么难度,在此只贴出相关代码:

html:

<div class="lstimg">
	<img src="images/1.jpg" />
</div>

css:

div{height:200px; width:200px; border:1px solid #000; margin:50px auto; padding:0;}
img{border:none;}

/*主要样式*/
.lstimg{position:relative;}
.lstimg img{position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; max-height:100%; max-width:100%;}

    效果跟之前的是一样的,在此不重复贴图。

    说点题外话,之前我是一直在使用display:table-cell或者表格做图片居中的,因为程序会替我们做图片的缩放,因此我也从来没考虑过替换这种方法,虽然它很麻烦。直到我做到手机站的时候,我发现这种模拟表格或者直接用表格的方法根本无法实现我要做的流动式的布局(图片跟随浏览器宽度的改变,自动等比拉伸或者缩小,但是一直保持垂直居中),只能利用响应式为图片的父元素固定几个大小,这样做出来的效果不是很平滑,在改变浏览器宽度的时候会明显感觉到跳动感,因此才决定找出解决该问题的办法,在搜阅资料的同时也顺便解决了pc端图片居中问题,也算是意外之喜~~这个事情让我也思考了一些事:总是在被逼无奈的情况下才想着去改进,这是不行的,前端这个行业技术更新很快,需要我们更主动的去更新自己的技术;对于现有的方法不能沉迷,从来如此不一定是错的,但是也不一定是好的。


© 著作权归作者所有

共有 人打赏支持
卢升腾
粉丝 0
博文 2
码字总数 1977
作品 0
黄浦
程序员
HTML5-基础篇-移动端适配 ( 二 )

一 : 科普一分钟 我们熟悉了在PC端进行开发网页,相对于移动设备需要有哪些调整呢,才能设计出符合各个场景和机型的完美移动网页.在众多APP 中大多嵌入H5页面开发,所以解决适配的问题很重要.其...

TianTianBaby223
2017/08/25
0
0
移动端网页布局中需要注意事项以及解决方法总结

winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉 <meta name="msapplication-tap-highlight" content="no"> 1、关闭iOS键盘首字母自动大写 <input type="text" autocapitaliz......

CharmyZ
2016/07/21
22
0
布局方式 - 前端进阶之路

页面布局的方式总是随着技术的更新和创意的涌现不断的更新换代。从最开始的 固定布局「Fixed」到因为宽屏设备和移动互联网的普及产生的响应式和自适应,再到「Mobile First」的设计理念,前端...

果汁凉茶丶
01/07
0
0
移动端Modal组件开发杂谈

Vant 是有赞开发的一套基于的组件库,在开发的过程中也踩了很多坑,今天我们就来聊一聊开发一个移动端Modal组件(在有赞该组件被称为)需要注意的一些。 在任何一个合格的UI组件库中,组件应...

2017/12/20
0
0
理解移动端viewport

参考文档:Safari Web Content Guide 首先要弄清楚 三个视口 的概念,分别是:视觉视口、布局视口、理想视口 1.视觉视口 就是指用户的可见视野。 2.布局视口 或许你不知道'布局视口'这个概念...

小尾巴儿
2016/12/05
10
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

阿里云API网关使用教程

API 网关(API Gateway)提供高性能、高可用的 API 托管服务,帮助用户对外开放其部署在 ECS、容器服务等阿里云产品上的应用,提供完整的 API 发布、管理、维护生命周期管理。用户只需进行简...

mcy0425
29分钟前
4
0
解决远程登陆误按ctrl+s锁屏假死恢复

使用putty时,偶尔发生屏幕假死,不能输入等情况。 后来发现,只要数据ctrl+s,就会假死;输入ctrl+q就可以恢复过来。 很多刚从windows转移到linux上来工作的朋友,在用vi/vim编辑文件时,常常...

HJCui
32分钟前
0
0
@Transactional

事务管理是应用系统开发中必不可少的一部分。Spring 为事务管理提供了丰富的功能支持。Spring 事务管理分为编程式和声明式的两种方式。编程式事务指的是通过编码方式实现事务;声明式事务基于...

asdf08442a
36分钟前
2
0
widows下强制解除8080端口占用问题

使用win+R打开命令窗口 输入以下命令查看哪个任务占用了8080端口 netstat -ano |findstr "8080" 然后通过任务id强制关闭占用该端口的进程 tskill 10044 // 自己的试情况而定,这个ID是LISTE...

_Artisan
46分钟前
2
0
productFlavors简单实用

最近项目中,不同环境需要配置的参数越来越多,为了减少修改代码次数。研究了一下productFlavors的使用方式,总结如下 1. as3.0以上版本使用productFlavors时需要指定一个flavorDimensions,...

火云
48分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部