ブログのマイナーアップデートを機に画像に影をつけるようにしてみたのですが、枠の横サイズを600pxに固定していたため必ず画像を600pxにしてあげる必要がありました。
当然、縦長の画像や600pxに満たない画像もあるわけで、ここの値は画像サイズに合わせて動的に設定できないかなぁと考えていたのですがjQueryで対応することができました。

試行錯誤した結果、下記のコードで解決することができました。

$(function() {
$("img.mt-image-center").each(function() {
var imgwdt = $(this).width();
var wrap = $('<span class="image-grid"></span>').width($(this).width());
$(this).wrap(wrap);
});
});

このブログはMovableTypeで運営して、画像ファイルの設定時に必ず中央表示を選択するのでclass="mt-image-center"が自動で埋め込まれます。
imgタグにクラスmt-image-centerがあたっていたら、その周りを<span class="image-grid">で囲うように設定しました。合わせて画像の横サイズを取得して設定しています。また、影を表現するスタイルはクラスimage-gridで設定しています。

これで画像サイズに応じて横幅を動的に取得して表示できるようになりました。chromeの「要素を検証」で確認するとばっちり囲われていることを確認。

<span class="image-grid" style="width: 600px;">
<img alt="フェローズ 703バンカーズBox" src="http://560days.com/diary/assets_c/2012/12/2012-12-29-001-thumb-600x450-1460.jpg" width="600" height="450" class="mt-image-center" style="text-align: center; display: block; margin: 20px auto 30px;">
</span>

要素を囲うwrapというのがあるんですね。かゆいところに手が届くjQueryですが、まだまだわからないことだらけです･‥。