关于文章内容页里上传的大图片按等比例缩放的问题着实让我伤透了脑筋，置之不理的话偶尔一两张大尺寸的图片会让整个页面变形。用原生的JavaScript实现的图片等比例缩放，存在max-width和max-height在ie6中不兼容的问题，而网上流传的那些强制指定图片最大宽度。
关于文章内容页里上传的大图片按等比例缩放的问题着实让我伤透了脑筋，置之不理的话偶尔一两张大尺寸的图片会让整个页面变形。用原生的JavaScript实现的图片等比例缩放，存在max-width和max-height在ie6中不兼容的问题，而网上流传的那些强制指定图片最大宽度的CSS代码无法实现等比例缩放，特殊点尺寸的图片会导致图片变得面目全非。
今天用jQuery实现这个问题。
css部分代码：
|
1 2 3 4 5 6 7 8 9 |
<style type="text/css"> body{ margin:0; padding:0;} .box{ width:700px; margin:0 auto;} .iflyma{ color: #333333; font-size: 14px; line-height: 25px; padding: 12px 2px; *display:table-cell; *font-size:35px; line-height:24px; vertical-align:middle;} img{ max-width:550px; overflow:hidden; vertical-align:middle; border: 4px solid #dfdfdf; margin: 5px; padding: 3px;} </style> |
html代码：
|
1 2 3 4 5 6 7 8 9 |
<div class="box"> <div class="iflyma"> <img src="http://blog.163.com/ssqilin@126/images/12.jpg" alt="等比例缩放图片"/> </div> </div> |
jQuery部分代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<script type="text/javascript"> $(document).ready(function(){ var maxWidth=$(".iflyma").width(); $("img").each(function(){ if(!$.support.style&&$.browser.msie&&($.browser.version==6.0)){ //判定浏览器为ie6的时候 var imgWidth=$(this).width(); var imgHeight=$(this).height(); var maxHeight = maxWidth*imgHeight/imgWidth; if(imgWidth>maxWidth){ $(this).css("width",maxWidth).css("height",maxHeight); } } }) }) </script> |
注意代码标注的红色部分跟你实际所需修改的DIV标签相吻合。
CSS代码部分是随意弄的。请根据你自己的实际情况修改。
