固定div容器的宽高,图片居中(图片不限制大小)


前言: 在一个固定的容器里,图片都是居中显示在容器里,不管是小于这个容器,还是大于这个容器,以下是我测试的 最好的一种解决办法,其他方法也有很多,但是这种是我觉得最好理解,最简单的一种,(line-height:在html4.0的声明中不起作用,但也值得一提,以后会用到的)

<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>

第二种,类似 仅仅修改了line-height,为table-cell

<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>

这两种方法能居中,还能缩放,但是ie6对缩放的图片有个问题,就是不能缩放,因为max-width这样的属性,ie6不支持,用到_width._height,但是这两个都加上,就不管图片多大,都缩放成200*200的了,很是变形,不但这样,对于,小于容器大小的图片也会这样,所以,我不打算针对ie6加上_width,_height,加上overflow;hidden;这样虽然在ie6下,大的图片只显示左上角的部分,但是其他的浏览器都能好,这已经是我找到的最简单的方法,要么用js方法做。

我最终发给大家一个近乎完美的图片自适应居中的解决方法,瑕疵已经说过了,但是瑕不掩瑜,不是吗

<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; max-width:200px; " >

</div>

在上面的代码,我修复一下,我把_width,_height,去掉了,因为这样对ie6那种宽和高都大的图片,效果很不好,这样在ie6下,那种大图片不会压缩变形,而是隐藏多余的。

写的不是很完美,期待你更好更多的意见。

优质内容筛选与推荐>>
1、HTML5 表单新增属性
2、对比Model前后数据保存不同值
3、LAMP环境搭建(Linux+Apache+MySQL+PHP)
4、转: ContextLoaderListener作用详解
5、我的webrequest经验


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号





    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议,举报不良信息等均可联系我们。

    TinyMind客服邮箱:support@tinymind.net.cn