راه حل ساده براي عكس‌هايي كه از كادر بيرون مي‌زنند

ارسال تصوير در سايت‌ها، انجمن‌ها و امثال آن هميشه مشكل زا است؛ خصوصا نمايش تصاويري در قطع يك تابلوي ديواري در يك كادر كوچك.
راه ساده و دم دستي زير، منهاي استفاده از اسكريپت‌هايي كه اندازه تصاوير را تشخيص داده و بر اين اساس خودشان آن‌ها را بند انگشتي نمايش مي‌دهند، هم براي حل اين مشكل وجود دارد:
فرض كنيد مطلبي كه قرار است ارسال شود در يك DIV نمايش داده مي‌شود و كلاس آن مثلا post-body است.
اولين كاري كه مي‌شود انجام داد اين است:
در CSS سايت قسمت مرتبط با post-body تعريف زير را اضافه مي‌كنيم تا اضافات عكس كه از كادر بيرون زده، خودبخود توسط مرورگر نمايش داده نشود:

overflow: hidden;

سپس در همين DIV كه كلاس آن post-body است، با استفاده از jQuery به دنبال تصاوير گشته و موارد يافت شده را داخل يك لينك پويا قرار مي‌دهيم (استفاده از متد wrap براي اين محصور سازي). اين لينك هم همان آدرس اصلي تصوير است. به اين ترتيب كاربر با كليك بر روي آن تصوير مي‌تواند نتيجه را در صفحه‌اي ديگر مشاهده كند:

$(document).ready(function(){  
 $('.post-body img').each(function(){
    var $img = $(this);
    var src = $img.attr("src");
    $img.attr({border:"0"}).wrap('<a target="_blank" alt="Click here to enlarge (opens new window)" title="Click here to enlarge (opens new window)" href="'+src+'" />');
 }); 
});