收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 4124|回复: 7

[教程] 【分享】解决图片垂直局中 且 图片的宽高在限定尺寸范围内等比例缩放问题

[复制链接]
发表于 2010-1-15 14:07:53 | 显示全部楼层 |阅读模式
凯子今天写了这么一个解决图片垂直局中和图片限定尺寸等比例缩放问题的DEMO,
分享给大家,希望对童鞋们未来工作效率上有所帮助,再也不用上网到处搜代码抠代码了,如果觉得不错请大伙藏之!

CSS样式注意点:IE浏览器对于图片是通过它的父级标签设定font-size:值来模拟实现垂直局中的,IE7、IE8直接设置需要垂直局中的高度,例如宽高是200*200px,那么设置font-size:200px;但对于IE6浏览器渲染有点差异,实际会高出高度20个像素左右,在实际操作上将理论的font-size:值减少大概20个像素,最好自己在浏览器里测试和测量一下,取得一个IE6理想的font-size:值,然后写在IE6的hack样式中。详情请参考DEMO中的样式。


JS缩放图片的逻辑:例如限定宽度在200*200px范围内的图片垂直局中,当图片宽高都小于200像素时不缩放;当宽大于200像素时,且宽>高,设定图片的宽度为200像素,高不设;当高大于200像素时,且高>宽,设定图片的高度为200像素,宽不设。详情请参考DEMO。

转载请注明出处:www.topcss.cn   (NND,被和谐了。)

 提示:您可以先修改部分代码再运行



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta name="robots" content="all" />
<meta name="author" content="Kaizi From Aliued.cn" />
<meta name="Copyright" content="Alibaba" />
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<link href="http://style.china.alibaba.com/css/fdevlib/reset/reset.css" type="text/css" media="screen" rel="stylesheet" />
<title>xhtml demo,解决图片垂直局中且图片宽高在限定范围内等比例缩放问题</title>
<style type="text/css" media="screen" rel="stylesheet">
.img_list ul li{ float:left; margin:10px; width:202px; height:202px; overflow:hidden; display:inline;}
.img_list ul li a{ width:200px; height:200px; overflow:hidden; display:table-cell; *display:block; line-height:200px;  font-size:200px; *font-size:180px; text-align:center;border:1px solid #f00; vertical-align:middle;}
.img_list ul li img { vertical-align:middle; vertical-align:middle;}
</style>
</head>

<body>
<div class="img_list">
        <ul id="img_list">
                <li>
                        <a href="#">
                                <img src="http://i00.c.aliimg.com/news/upload/5000780/2_1263433563767.jpg" alt="示例图片" />
                        </a>
                </li>
                <li>
                        <a href="#">
                                <img src="http://img.china.alibaba.com/news/upload/5000260/392192_1263174952956.jpg" alt="示例图片" />
                        </a>
                </li>
                <li>
                        <a href="#">
                                <img src="http://i00.c.aliimg.com/news/upload/profile/huodong/guanghuo/03/45_1263268910318.jpg" alt="示例图片" />
                        </a>
                </li>
                <li>
                        <a href="#">
                                <img src="http://i04.c.aliimg.com/news/upload/king/cztg/28/472_220_1263376108835.jpg" alt="示例图片" />
                        </a>
                </li>
        </ul>
</div>
<script type="text/javascript">
/*
        * auto resize image
        * @param    img     img obj
        * @param    w       custom width
        * @param    h       custom height
        */
        resizeImage=function(img,w,h) {
            img.removeAttribute('width');
            img.removeAttribute('height');
            var pic;
            if(document.all) {
                var pic=new Image();
                pic.src=img.src;
            } else pic=img;
            //check images exist and width&height >0 and custom width >0
            if(pic&&pic.width&&pic.height&&w) {
                if(!h) h=w;
                if(pic.width>w||pic.height>h) {
                    var scale=pic.width/pic.height,fit=scale>=w/h;
                    if(document.all) img=img.style;
                    img[fit?'width':'height']=fit?w:h;
                    if(document.all) img[fit?'height':'width']=(fit?w:h)*(fit?1/scale:scale);
                }
            }
        };
               
window.onload=function(){
        var images=document.getElementById('img_list').getElementsByTagName('img');
        for(var i=0;i<images.length;i++){
                resizeImage(images[i],200);
        }
               
                };
</script>
</body>
</html>

[[i] 本帖最后由 karlen 于 2010-1-15 14:10 编辑 ]
发表于 2010-1-15 14:24:02 | 显示全部楼层
垂直居中。学来的。

 提示:您可以先修改部分代码再运行



http://www.zhoumingzhi.cn/2010/01/14/未知高度元素垂直居中/#replaced
回复 支持 反对

使用道具 举报

发表于 2010-1-15 14:33:28 | 显示全部楼层
FF下是把图片等比例缩小了,在IE6下却把图片截取了


不好意思:

找到IE6下为什么截取图片了,因为你的样式中:
.img_list ul li img { vertical-align:middle; vertical-align:middle;}
重复了

[[i] 本帖最后由 writeidea 于 2010-1-15 14:35 编辑 ]
回复 支持 反对

使用道具 举报

 楼主| 发表于 2010-1-15 14:57:30 | 显示全部楼层
谢谢楼上指证。

至于对font-size设置IE6hack问题,网上有人研究出了一个公式,是:理论高度*0.873
200像素的高度算出来应该约等于 175像素
回复 支持 反对

使用道具 举报

发表于 2010-1-15 15:07:23 | 显示全部楼层
很实用啊~
回复 支持 反对

使用道具 举报

发表于 2010-1-18 13:19:04 | 显示全部楼层
很不错我..收藏了
回复 支持 反对

使用道具 举报

发表于 2010-3-17 19:41:29 | 显示全部楼层
收藏2楼的垂直居中~
回复 支持 反对

使用道具 举报

发表于 2010-3-17 22:09:05 | 显示全部楼层
嗯,以前也想过一个局中的办法:
不知和楼主的办法相比,有什么优劣:

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-23 23:22 , Processed in 0.124688 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表