Squarespace图像居中

Question

Squarespace如何将每个图像居中，即使它们在风景和肖像图像之间具有不同的维度？

我一整天都在尝试不同的解决方案，但我似乎找不到答案。

http://bryant-demo.squarespace.com

看看他们的lightbox和它的代码。我试着模仿它，但我似乎无法复制他们的结果。

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/

附注:如果你在其他容器中设置图像，而不是主体，你只需对不同的元素应用相同的计算即可。

编辑：实际上，同样的方法也适用，当然，不管容器比图像大还是比图像小……所以，很简单:image 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();

新的演示：

附注:检查页面上的元素，在我的演示中:您将看到使用了相同的技术(隐藏的图像部分将由检查器显示)……密钥溢出:对固定的盒子隐藏，所以...你应该应用类似的css来获得想要的效果。