Squarespace燈箱圖像居中

Question

即使Squarespace在景物和肖像圖像之間具有不同的尺寸，但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/

附：如果您在其他容器中設置圖像，而不是正文，則只需對不同的元素應用相同的計算。

編輯： 其實，同樣的方法作品，當然，不管容器是更大的，比圖像更小。所以，簡單的：圖像中心=集裝箱中心站，併爲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/

附：檢查他們頁面上的元素，並在我的演示中：你會看到使用相同的技術（隱藏的圖像部分將由檢查員顯示）...鍵是溢出：隱藏的固定框，所以...你應該應用類似CSS來獲得所需的效果。