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

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 default：false

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

  

true ：缩放所有图片以填充舞台，居中并裁剪    false ：缩小以便整个图像适合   'height'：缩放图像以填充舞台的高度   'width'：将缩放图片以填充舞台的宽度   'landscape'将填充具有横向比例的图像，但缩放纵向图像以适合容器内部。
  'portrait'就像'风景'，但反过来。

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

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

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

Answer 2

there are options for your gallery

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

例如，您可以使用变量来定义高度。

Answer 3

术语有点令人困惑，但我的理解是你的原始图像是1024x768但Galleria缩放特色图像以适应舞台，问题是如何增加特色图像尺寸。

在您的示例中，按此样式#galleriaimage_7{ width: 200px; height: 200px; background: #000; }将舞台设置为200x200。

在控制台中，我将这些样式维度更改为width: 1024px; height: 768px;并通过运行Galleria.run('#galleriaimage_7');刷新Galleria，脚本解析样式以设置舞台大小。黑色背景中还有额外的填充，因此您需要使舞台更大或编辑样式以删除填充。