javascript - slider 中的图像显示小于实际图像

Question

我正在尝试单独显示单个图像并在 slider 中显示多个图像。唯一的问题是我无法让 slider 中的图像匹配与单个图像相同的高度，它显示的图像要小得多。如何获得匹配的图像大小？即使我得到相同高度和宽度的图像，图像在 slider 中显示得更小。

这是一个显示图像的应用程序:HERE

(忽略通知错误)

显示图像和 slider 的代码:

<?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 or String default: false

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

true: all images are scaled to fill the stage, centered and cropped.
false: scales down so the entire image fits.
‘height’: scales the image to fill the height of the stage.
‘width’: will scale the image to fill the width of the stage.
‘landscape’ will fill up images that has landscape proportions, but scale portrait images to fit inside the container.
‘portrait’ is like ‘landscape’ but the other way around.

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

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

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