在使用UEditor等HTML编辑器时，若文章中图片大小超过元素给定的尺寸，则图片显示时会超出元素范围，使页面的排版出现混乱，这时可使用jQuery对文章中的图片和显示方式进行处理，以控制图片的显示大小和出现的方式。
以下为jQuery的JS文件和jQuery UI的引入文件。
[html]
<link rel="stylesheet" type="text/css" href="css/custom-theme/jquery-ui-1.8.23.custom.css"/>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
以下为用于对文件中图片显示所使用的层
[html]
<div id="picDlg" title="图片查看" style="display:none;"></div>
以下为控制图片显示和运用效果的代码
[html]
$(".bodyLeft img").load(function(){
w=$(this).width();
h=$(this).height();
t=$(this).attr("title");
src=$(this).attr("src");
$(this).width(w>400?400:w);
$(this).height(w>400?(400/w)*h:h);
$(this).css("cursor","pointer");
$(this).click(function(){
$("#picDlg").html("<img src="+src+" border=0/>").fadeIn(1000).dialog({
width:"auto",
height:"auto",
title:t,
modal:true,
draggable:false,
resizable:false
})
})
})
