Squarespace Lightbox Image Centering

Question

Как квадрат центрирован для каждого изображения, даже если они имеют разные размеры, изменяющиеся между пейзажными и портретными изображениями?

Я пробовал разные решения весь день, и я не могу понять это.

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/

P.S. Если вы устанавливаете изображения в каком-либо другом контейнере, а не в теле, вам просто нужно применить тот же расчет для другого элемента.

EDIT: На самом деле, тот же метод работы, конечно же, независимо от того, если контейнер больше, или меньше, чем изображение ... Так, просто: изображение центр = контейнер центр и 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(); 

NEW DEMO:

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

P.S. Осмотрите элементы на своей странице и в моей демонстрации: вы увидите, что используется тот же метод (скрытые части изображения будут показаны инспектором) ... Ключ переполнен: скрыт для фиксированных ящиков, поэтому ... вам следует применить аналогичные css, чтобы получить желаемый эффект.