文档章节

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

卢升腾
 卢升腾
发布于 2014/06/02 13:50
字数 1702
阅读 449
收藏 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
移动端Modal组件开发杂谈

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

2017/12/20
0
0
纯CSS实现垂直居中的几种方法

垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。有了css3,针对移动端的垂直居中就更加多样化。 方法1:t...

lslaiwy
2018/09/04
0
0
布局方式 - 前端进阶之路

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

果汁凉茶丶
2018/01/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
6
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
3
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
2
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
0
0
RabbitMQ学习(2)

1. 生产者客户端 void basicPublish(String exchange, String routingKey, boolean mandatory, boolean immediate, BasicProperties props, byte[] body) 1. 在生产者客户端发送消息时,首先......

江左煤郎
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部