HTML编辑器中图片的处理

在使用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
        })
    })
})

补充：web前端 , HTML/CSS  ,