滑块中的图像显示小于实际图像

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

看一下imageCrop参数.

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

type:Boolean或String默认值:false

定义主图像在其容器内的裁剪方式.

true:缩放所有图像以填充舞台,居中和裁剪.
false:缩小以使整个图像适合.
'height':缩放图像以填充舞台的高度.
'width':将缩放图像以填充舞台的宽度.
'landscape'将填充具有横向比例的图像,但缩放纵向图像以适合容器内部.
'肖像'就像'风景',但反之亦然.

您甚至可以成功组合参数:

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

或者通过CSS设置高度/宽度,并单独使用imageCrop.