Squarespace燈箱圖像居中

Question

即使在橫向和縱向圖像之間尺寸不同，Squarespace如何使每個圖像居中？

我整天都在嘗試不同的解決方案，但似乎無法解決。

http://bryant-demo.squarespace.com

看一看他們的燈箱及其代碼。 我嘗試模擬它，但似乎無法復制他們的結果。

Answer 1

不知道他們在做什么，因為我看到他們將圖像尺寸和許多其他內容作為屬性...但是這里是一種簡單的居中方法，與屏幕尺寸有關，這也是在他們的案例中應用的基本計算方法，我猜。 此外，有不同的css方法來居中...

 screen_width=$(window).width();
        screen_height=$(window).height();

        img_width= $('#images img').eq(i).width();
         img_height= $('#images img').eq(i).height();

        //set to center

        $('#images img').eq(i).css('margin-top',(screen_height-img_height)/2+'px');
         $('#images img').eq(i).css('margin-left',(screen_width-img_width)/2+'px');

演示： http ： //jsfiddle.net/dfwosy4m/

PS如果將圖像放置在其他容器（而不是主體）中，則只需對不同元素應用相同的計算即可。

編輯：實際上，無論容器是大於還是小於圖像，實際上，相同的方法都有效，因此，simple：image center = container center，其余部分overflow:hidden 。

function centralize() {
    screen_width = $('.box').width();
    screen_height = $('.box').height();

    $('#images img').each(function(i) {

        img_width = $(this).width();
        img_height = $(this).height();

        //set to center

        $(this).css('margin-top', (screen_height - img_height) / 2 + 'px');
        $(this).css('margin-left', (screen_width - img_width) / 2 + 'px');

});
}

    centralize();

新演示：

http://jsfiddle.net/dfwosy4m/3/

PS在其頁面上以及我的演示中檢查元素：您將看到使用了相同的技術（隱藏的圖像部分將由檢查器顯示）...密鑰溢出：隱藏在固定框中，因此...您應該應用類似的CSS以獲得預期的效果。