jQueryでサムネイルの縦位置を中央揃えにする

なんかこのブログのサムネイルの画像にInstagramの正方形の写真みたいなものを適用すると縦位置が中央揃えにならなくて気持ち悪いので、簡単な処理を書きました。横幅300pxに揃えた時に縦長が200pxを超えてしまう画像に対して、マイナスマージン設定してます。

$(function(){
    var photos = $('section.img img');
    $.each(photos,function(){
        var hgt = 300 / $(this).width() * $(this).height();
        if( hgt > 200){
            var diff = ((200 - $(this).height()) / 2);
            $(this).css('margin-top',diff+'px');
        }
        $(this).css('visibility','visible');
    });
});

同じような形で横幅の調整もやっています。これでサムネイル画像の縦横比、基本的に気にしなくて良いことになります。

すっきりした。

加藤 康祐 / 企画・設計

プランナー、デザイナー。加藤康祐企画設計代表。Webデザインを入り口に、2005年よりフリーランスとしてのキャリアスタート。主な仕事としてベンチャー企業でのサービスのUXデザイン、独法との防災メディアの運営、社会的養護の子どもたちの自立を支援するNPOのサポート。ラグビーと料理、最近イラスト。

加藤康祐企画設計

是非、フォローしてください！
Twitter / Instagram

『ひとり仕事: フリーランスという働き方』 加藤 康祐

posted with amazlet at 15.09.10

(2012-10-5)
売り上げランキング: 14,705
100円

Amazon.co.jpで詳細を見る

フリーランスとして働き始めるってどういうことだったのか？フリーランスとして働くってどういうことなのか？フリーランスが目指すことってなんなのか？5年間の自分の経験から書きました。（2010年執筆）