当前位置:首页 > 网站维护 > 列表

图片大小不固定的水平垂直居中解决方案

来源:浦一科技点击:时间:2017-2-17 关键词:上海网站制作 网站链接 上海网站建设
在多年的上海网页制作的项目过程中,如果产品图片宽高定死的话,有的图片就会变形,如果把宽给个最大宽,高自适应的话有的图又会由于是个长方形高超出了容器,这样就不得不截掉一部分图。于是就想着,首先不管图片是个什么比例,不管它是宽远大于高或者高远大于宽,统一设置最大的
图片大小不固定的水平垂直居中解决方案

在多年的上海网页制作的项目过程中,如果产品图片宽高定死的话,有的图片就会变形,如果把宽给个最大宽,高自适应的话有的图又会由于是个长方形高超出了容器,这样就不得不截掉一部分图。于是就想着,首先不管图片是个什么比例,不管它是宽远大于高或者高远大于宽,统一设置最大的宽高值,不让它超出容器,并且这样处理图片不会变形。接下来想怎么处理图片大小不定,在固定容器中水平垂直居中的问题。

1.推荐使用方法(利用font-size:0与空白标签)

<div class="imgMid-a">
<ul>
<li><a href="#"><span></span><img src="http://www.021jz.com.cn/uploadfile/20160521/20160521153134264.jpg"></a></li>
<li><a href="#"><span></span><img src="hhttp://www.021jz.com.cn/uploadfile/20160521/20160521153134264.jpg"></a></li>
<li><a href="#"><span></span><img src="http://www.021jz.com.cn/uploadfile/20160521/20160521153134264.jpg"></a></li>
</ul>
</div>

.imgMid-a{width: 700px;height: 200px;margin:50px auto;}
.imgMid-a ul{width: 750px;}
.imgMid-a li{float: left;width:200px;height:200px;margin-right: 50px;text-align: center;font-size: 0;}
.imgMid-a li a{display: block;width: 198px;height: 198px;border: 1px solid #ccc;}
.imgMid-a li a:hover{border: 1px solid #f00;}
.imgMid-a li span{display: inline-block;width: 1px;height: 100%;vertical-align:middle;}
.imgMid-a li img{vertical-align: middle;max-width:178px;max-height:178px;}

2.建议掌握技巧。利用display:table-cell与display:inline

<div class="imgMid-a">
<ul>
<li><a href="#"><span></span><img src="http://www.021jz.com.cn/uploadfile/20160521/20160521153134264.jpg"></a></li>
<li><a href="#"><span></span><img src="hhttp://www.021jz.com.cn/uploadfile/20160521/20160521153134264.jpg"></a></li>
<li><a href="#"><span></span><img src="http://www.021jz.com.cn/uploadfile/20160521/20160521153134264.jpg"></a></li>
</ul>
</div>

.imgMid-b{width: 700px;height: 200px;margin:50px auto;}
.imgMid-b ul{width: 750px;}
.imgMid-b li{float: left;margin-right: 50px;}
.imgMid-b li a{width: 198px;height: 198px;border: 1px solid #000;display: table-cell;text-align: center;vertical-align: middle;}
.imgMid-b li a:hover{border: 1px solid #f00;}
.imgMid-b li img{vertical-align: middle;max-width: 178px;max-height: 178px;}
<!--[if lt IE 8]>
<style type="text/css">
.imgMid-b{height: 0;zoom:1;}
.imgMid-b a{display: block;}
.imgMid-b span{display: inline-block;vertical-align: middle;height: 100%;}
</style>
<![endif]-->

也许这种方法较第一种更为繁琐,还得写兼容ie的hack,但是我觉得用display-table和vertical-middle在现代浏览器中实现图片垂直居中是很值得学习的。如果以后不需要做低端浏览器的兼容了,这种方法应该会更适合我。

服务项目

网站建设

网站建设

通过SEO优化技术,提供更多的展示机会,带来大量精准流量和询盘,每月意向客户增长20%。

手机网站建设

手机网站建设

手机网站的时代强势来袭,赢在全网营销时代,手机+电脑双剑合璧,把握商机滴水不漏。

网站维护

网站维护

一个好的网站需要定期或不定期地更新内容,才能不断地吸引更多的浏览者,增加访问量。

整合网络营销

整合营销

为了建立、维护和传播品牌,以及加强客户关系,而对品牌进行计划、实施和监督的一系列营销

预约建站
免费提供网站优化
领取关键词