CSS如何让图片垂直并水平居中等比缩放?

这里先介绍一下淘宝网是如何处理这个问题的,刚在网上查找解决方法时,发现淘宝网现前端工程师”怿飞”的博客中有提到,先看看他提示的方法,

效果演示:

源代码:

.box {
	/*非IE的主流浏览器识别的垂直居中的方法*/
	display: table-cell;
	vertical-align:middle;
	/*设置水平居中*/
	text-align:center;
	/* 针对IE的Hack */
	*display: block;
	*font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/
	*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
	width:200px;
	height:200px;
	border: 1px solid #eee;
}
.box img {
	/*设置图片垂直居中*/
	vertical-align:middle;
	/*非IE6下的等比缩放*/
	max-height:150px;
	max-width:150px;
	/*IE6下的等比缩放,注意expression其实是运行了一个JS程序,所以如果图片很多的话会引起CPU占用率高*/
	width:expression(this.width >150 && this.height < = this.width ? 150: true);    	height:expression(this.height > 150 && this.width < = this.height ? 150 : true);
}

注:以上方法在IE8下不推荐。可以使用在IE6,IE7,FF等。

接下来让我们看看其它解决IE6,IE7,IE8,FF等浏览器居中问题的办法。

图片要垂直水平居中
第一种
css里面

body里面

第二种
css里面

body里面

第三种
css里面

body里面


< ![endif]-->
 

第四种
css里面

body里面

有兴趣的可以阅读以下方法:
《Vertical centering using CSS》
《Vertical centering using CSS》(标题和上同,内容不同)
《CSS List Grid Layout》

如有其它好方法请留言。

相关文章:

1、经典DIV + CSS Layout
https://www.onexin.net/classic-div-css-layout/

2、纯CSS制作随着鼠标跑动的裸男
https://www.onexin.net/naked-man-running-the-pure-css-production-with-the-mouse/

3、CSS+DIV基础知识大观
https://www.onexin.net/css-div-basics-of-grand/

4、网站重构:利用CSS改善网站可访问性
https://www.onexin.net/site-reconstruction-using-css-to-improve-website-accessibility/

5、DIVC+SS网页特效欣赏:非常酷的角BANNER
https://www.onexin.net/divc-ss-web-effects-appreciate-very-cool-angle-banner/

转载请注明出处:https://www.onexin.net/div-css-how-to-make-image-vertical-and-align-center-geometric-scaling/

One Reply to “CSS如何让图片垂直并水平居中等比缩放?”

Leave a Reply

Your email address will not be published. Required fields are marked *