изображения в слайдере отображаются меньше фактического изображения

Question

Я пытаюсь отобразить одиночное изображение самостоятельно и несколько изображений в слайдере. Единственная проблема заключается в том, что я не могу получить изображения в слайдере, чтобы они совпадали с той же высотой, что и одно изображение, оно отображает изображения намного меньше. Как я могу получить размер изображений для соответствия? Даже если я получаю изображение одинаковой высоты и ширины, изображения отображаются меньше в слайдере.

Вот приложение, показывая изображения: HERE

(игнорировать ошибку уведомления)

код отображения изображения и бегунок:

<?php 
    //start:procedure image 
    if(count($arrImageFile[$key]) == 1){ 
     foreach ($arrImageFile[$key] as $i) { 
?> 
<p><img alt="<?php echo $i; ?>" height="200" width="200" src="<?php echo 'ImageFiles/'.$i; ?>"></p> 
<?php 
     } 
    } else if(count($arrImageFile[$key]) > 1){ 
?> 

<style> 
    #galleriaimage_<?php echo $key; ?>{ width: 200px; height: 250px; background: #000 } 
</style> 
<div id="galleriaimage_<?php echo $key; ?>"> 
<?php foreach ($arrImageFile[$key] as $i) { ?> 
    <img alt="<?php echo $i; ?>" height="250" width="200" src="<?php echo 'ImageFiles/'.$i; ?>"> 
<?php } ?> 
</div> 

<script type="text/javascript"> 
    Galleria.loadTheme('jquery/classic/galleria.classic.min.js'); 
    Galleria.run('#galleriaimage_<?php echo $key; ?>'); 
</script> 

<?php 
    } 

Answer 1

there are options for your gallery

Galleria.run('#galleria', { 
    height: 400 
}); 

вы можете используйте переменную для определения высоты, например.

Answer 2

Посмотрите на параметр imageCrop.

http://galleria.io/docs/options/imageCrop/

Тип: Boolean или Строка по умолчанию: ложные

Определяет, как основное изображение будет обрезано внутри его контейнера.

правда: все изображения масштабируются для заполнения сцены, по центру и обрезано.
false: масштабируется, поэтому все изображение подходит.
'height': масштабирует изображение, чтобы заполнить высоту сцены.
'width': масштабирует изображение, чтобы заполнить ширину сцены.
«Пейзаж» заполнит изображения, которые имеют размеры ландшафта, но масштабируют портретные изображения для размещения внутри контейнера.
«портрет» похож на «пейзаж», но наоборот.

Вы даже можете иметь успех, сочетающий параметры:

Galleria.run('#galleria', { 
    height: 250, 
    imageCrop: 'height' 
}); 

или установка высоты/ширины с помощью CSS, и с помощью imageCrop в одиночку.

Answer 3

Терминология немного сбивает с толку, но я понимаю, что ваши оригинальные изображения 1024x768, но Galleria масштабирует изображение, чтобы соответствовать сцене, и вопрос заключается в том, как увеличить размер отображаемого изображения.

В вашем примере эта сцена установлена ​​в 200х200 в этом стиле #galleriaimage_7{ width: 200px; height: 200px; background: #000; }.

В консоли я изменил эти размеры стиля на width: 1024px; height: 768px; и обновил Galleria, запустив Galleria.run('#galleriaimage_7');, и сценарий анализирует стиль, чтобы установить размер сцены.На черном фоне есть дополнительное дополнение, поэтому вам нужно будет сделать сцену еще более крупной или отредактировать стили, чтобы удалить дополнение.