Лайтбокс - Можно ли принудительно изменить размер изображения? - PullRequest
Новая
       11

Лайтбокс - Можно ли принудительно изменить размер изображения?

2 голосов
/ 01 марта 2010

Кто-нибудь знает, как принудительно изменить размер изображения, которое открывается в лайтбоксе, либо в CSS, либо взломав лайтбокс?

Я знаю, что это не очень хорошее решение иметь фиксированный размер изображения (должно быть сделано при загрузке), но это специфическое требование клиента.

Спасибо.

Ответы [ 7 ]

4 голосов
/ 15 сентября 2012

Добавьте это к css: 

#lightbox-container-image img { width:auto; max-height:520px; }
3 голосов
/ 03 июня 2013 
<style>
    .lb-outerContainer { max-width:690px; max-height:520px; }
    .lb-image{ width:500px; max-height:500px;}
</style>
1 голос
/ 01 марта 2010

В вашем CSS вы можете настроить размер изображения, чтобы заполнить максимальную ширину, сохраняя при этом такое же соотношение сторон, как это: 

img {width:100%; height:auto}

Пока контейнер является блоком, это должно регулировать размер изображения. Имейте в виду, что в старых браузерах это может выглядеть пиксельно, потому что для масштабирования изображений используется инструмент масштабирования изображения, используемый в этих браузерах.

1 голос
/ 01 марта 2010

Это неплохое решение с фиксированным размером. Просто установите max-height или max-width (в CSS) на что угодно (но не на оба) - изображение будет правильно масштабироваться.

Но все изображения должны быть одного формата, в противном случае высота / ширина могут отличаться.

И если вы установите фиксированный размер в CSS (ширина, высота), то изображения будут смещены.

0 голосов
/ 10 октября 2014

Найдите эти строки в jquery.colorbox.js 

photo.style.width = photo.width+200 + 'px';
photo.style.height = photo.height + 'px';

и заменить на 

photo.style.width = photo.width+200 + 'px';
//photo.style.height = photo.height + 'px';

удаление высоты изображения и увеличение ширины изображения с помощью знака +.

0 голосов
/ 05 декабря 2012

Я использовал этот код с slimbox2: 

#lbImage {

    width:320px;
    height:240px;
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
    -moz-background-size: cover;

}
0 голосов
/ 01 марта 2010

Вместо использования CSS, просто измените размер изображения, используя методы jquery width () и height () для элемента изображения.

Прежде чем сделать это, я бы порекомендовал разделить одно на другое, чтобы получить соотношение, чтобы не искажать изображение! :)

...