jquery - アスペクト比を維持するレスポンシブフォトグリッドを作成しますか？

Question

組積造で配置された画像のグループがあります。画像のサイズを変更できるようにしたいのですが、同じ順序のままにしておきたいのです。基本的に、グリッド全体で同じアスペクト比を維持する必要があります。流動的な石積みレイアウトオプションを試しましたが、画像がいたるところにジャンプします。アスペクト比を維持するようにコンテナdivを設定すると、ブラウザのサイズ変更時に画像がコンテナの下にジャンプします。とにかくCSSでこれを行うことはありますか？

Answer 1

このjQuery関数から使用できるアスペクト比を維持するには：

jQuery.fn.fitToParent = function()
{
    this.each(function()
    {
        var width  = $(this).width();
        var height = $(this).height();
        var parentWidth  = $(this).parent().width();
        var parentHeight = $(this).parent().height();

        if(width/parentWidth < height/parentHeight)
        {
            newWidth  = parentWidth;
            newHeight = newWidth/width*height;
        }
        else
        {
            newHeight = parentHeight;
            newWidth  = newHeight/height*width;
        }
        margin_top  = (parentHeight - newHeight) / 2;
        margin_left = (parentWidth  - newWidth ) / 2;

        $(this).css({'margin-top' :margin_top  + 'px',
                     'margin-left':margin_left + 'px',
                     'height'     :newHeight   + 'px',
                     'width'      :newWidth    + 'px'});
    });
};