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

Question

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

这是一个显示图像的应用程序：这里

（忽略通知错误）

显示图像和滑块的代码：

<?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

Answer 2

您的画廊有多种选择

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

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

Answer 3

术语有点混乱，但我的理解是您的原始图像是 1024x768，但 Galleria 会缩放特色图像以适应舞台，问题是如何增加特色图像的大小。

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

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