第二种,类似 仅仅修改了line-height,为table-cell
- <div style="width:200px; height:200px; overflow:hidden; text-align:center; border:1px solid red; font-family: arial; line-height:198px; _font-size:180px;">
- <img src="images/82.jpg" alt="" style="display:inline-block; vertical-align:middle; max-height:200px; max-width:200px;" >
- </div> www.CuoXIn.com
这两种方法能居中,还能缩放,但是ie6对缩放的图片有个问题,就是不能缩放,因为max-width这样的属性,ie6不支持,用到_width._height,但是这两个都加上,就不管图片多大,都缩放成200*200的了,很是变形,不但这样,对于,小于容器大小的图片也会这样,所以,我不打算针对ie6加上_width,_height,加上overflow;hidden;这样虽然在ie6下,大的图片只显示左上角的部分,但是其他的浏览器都能好,这已经是我找到的最简单的方法,要么用js方法做。
- <div style="width:200px; height:200px; text-align:center; border:1px solid red; vertical-align:middle;font-family: arial; display:table-cell; *font-size:175px;">
- <img src="images/81.jpg" alt="" style="vertical-align:middle; max-height:200px; max-width:200px;" >
- </div>
我最终发给大家一个近乎完美的图片自适应居中的解决方法,瑕疵已经说过了,但是瑕不掩瑜,不是吗
- <div style="width:200px; height:200px; overflow:hidden; text-align:center; border:1px solid red; font-family: arial; line-height:198px; _font-size:180px;">
- <img src="images/83.jpg" alt="" style="display:inline-block; vertical-align:middle; max-height:200px; _height:200px; max-width:200px; _width:200px;" >
- </div>
写的不是很完美,期待你更好更多的意见。
新闻热点
疑难解答