• 专注于网站建设,网络推广,关键词优化,SEO优化,专业的网站建设开发团队!
首页 > IT技术 > DIV+CSS > 内容

图片横向纵向居中且图片等比缩放

2015-06-10 22:55:10   来源:叶景网络
    叶景网络(www.cngxit.com),致力于互联网品牌建设与网络营销,专业领域包括网站建设、电子商务、移动互联网营销、系统平台开发, 与其他网站建设等。叶景网络为您分享:图片横向纵向居中且图片等比缩放实现代码:
    <ul class="zxx_align_box_4 fix" >
    <li>
    <div id="ff"><img src="images/1.jpg" onload="DrawImage(this)"/></div><center><p></p></center>
    <i title="img"></i>
    </li>
    <li>
    <div id="ff"><img src="images/t1.jpg" onload="DrawImage(this)"  /></div><center><p></p></center>
    <i title="img"></i>
    </li>
    </ul>
    <script>
    function DrawImage(ImgD){
    var image=new Image();
    image.src=ImgD.src;
    if(image.width>75||image.height>60)//75为前台理想显示最大的宽度,60为最大显示高度
    {
    var bili=75/60;//前台显示范围长宽比例
    if(image.width/image.height>bili){
    ImgD.width=75;
    ImgD.Height=75*image.height/image.width;
    }
    else{
    ImgD.height=60;
    ImgD.width=60*image.width/image.height;
    }
    }
    }
    </script>
    css
    .zxx_align_box_4 li{float:left; margin-right:13px; width:86px; height:69px; overflow:hidden}
    .zxx_align_box_4 li div{display:table-cell; width:75px; height:67px; border:1px solid #beceeb; font-size:60px; text-align:center; vertical-align:middle; overflow:hidden}
    .zxx_align_box_4 li div img{vertical-align:middle;}
叶景网络,网络推广,网站建设
特别推荐RECOMMEND
搜索引擎网站关键词seo优化的意义
视频推广怎么做
网站seo优化怎么做关键词排上首页?
SEO介绍什么叫搜索引擎网站关键词优化
seo优化怎样做提升关键词排名
热点图文Hot
table+div+iframe打造高度自适应的后台框架 table+div+iframe打
HTML页面CSS书写规范 HTML页面CSS书写规范
CSS中一种简单的方法让文字与图片平行 CSS中一种简单的方
CSS兼容IE6问题汇总 CSS兼容IE6问题汇总
关注排行RANKING
1

table+div+iframe打造高度自适应的后台框架

table+div+iframe打造高度自适应的后台框架 第一个tr是固定高度,用于顶部的导航菜单,所以无论是td还是里面的div header,其高度...

2

HTML页面CSS书写规范

HTML页面CSS书写规范 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网站建设、...

3

CSS中一种简单的方法让文字与图片平行

CSS中一种简单的方法让文字与图片平行 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领域包括网...

4

CSS兼容IE6问题汇总

CSS兼容IE6问题汇总 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领...

5

DIV+CSS图片和文字如何显示同一行

DIV+CSS图片和文字如何显示同一行 需要把图片和单行文字垂直居中对其,可以给图片 的CSS 定义一个vertical-align: midd...

6

关于IE中18px的默认行高

关于IE中18px的默认行高 在IE中定义height时,如果值小于18px的默认行高时,得到的结果总是18px的高,这...

7

DIV CSS 网页兼容全搞定 (IE6 ...

DIV CSS 网页兼容全搞定 (IE6 IE7 IE8 IE9 火狐 谷歌) 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明。

8

常用的CSS命名规范

常用的CSS命名规范 叶景网络(www cngxit com),致力于互联网品牌建设与网络营销,专业领...

9

DIV+CSS浏览器兼容模式

DIV+CSS浏览器兼容模式 这里细说一下block与inline两个元素:block元素的特点是,总是在新行上开始,高度,宽度,行...