»»»美仑©本站聚集品质模板、JS特效、源码、模块、原创等丰富资源下载。
首页 教程 Div+Css教程 固定div容器的宽高,图片居中(图片不限制大小)

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

2016-08-04 16:04:47| 责任编辑: Mr.pan| 查看: | 评论: 0| 百度已收录
摘要:   前言: 在一个固定的容器里,图片都是居中显示在容器里,不管是小于这个容器,还是大于这个容器,以下是我测试的 最好的一种解决办法

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

  1. <div style="width:200px; height:200px; overflow:hidden; text-align:center; border:1px solid red; font-family: arial; line-height:198px;  _font-size:180px;">   
  2.   <img src="images/82.jpg" alt="" style="display:inline-block; vertical-align:middle; max-height:200px; max-width:200px;" >   
  3. </div>  

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

  1. <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;">  
  2.    <img src="images/81.jpg" alt="" style="vertical-align:middle; max-height:200px; max-width:200px;" >   
  3. </div>  

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

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

  1. <div style="width:200px; height:200px; overflow:hidden; text-align:center; border:1px solid red; font-family: arial; line-height:198px;  _font-size:180px;">  
  2.   
  3.  <img src="images/83.jpg" alt="" style="display:inline-block; vertical-align:middle; max-height:200px; _height:200px; max-width:200px; _width:200px;" >  
  4.   
  5.  </div>  

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

相关热词搜索:图片 容器 大小

延伸阅读

精彩阅读
会员登录
广告位

关注我们:美仑视觉

官方QQ群

微信平台

全国服务热线:

0769-33232320

【版权声明】本站内容由互联网用户自发贡献,本站不拥有所有权,不承担相关法律责任。如果发现本站有涉嫌抄袭的内容,欢迎发送邮件至Email:admin@meil88.com 举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。

Copyright   ©2013-2018  美仑视觉  Powered by©Meil88!  公安备案:粤ICP备15022042号