4

単一の画像を単独で表示し、複数の画像をスライダーに表示しようとしています。唯一の問題は、スライダー内の画像を単一の画像と同じ高さに合わせることができないことです。画像がはるかに小さく表示されています。画像のサイズを一致させるにはどうすればよいですか? 同じ高さと幅の画像を取得しても、画像はスライダーで小さく表示されます。

画像を表示するアプリは次のとおりです。

(通知エラーは無視してください)

画像とスライダーを表示するコード:

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

3 に答える 3

0

用語は少しわかりにくいですが、私の理解では、元の画像は 1024x768 ですが、Galleria は主役の画像をステージに合わせて拡大縮小し、問題は主役の画像のサイズを大きくする方法です。

あなたの例では、ステージはこのスタイルで 200x200 に設定されています#galleriaimage_7{ width: 200px; height: 200px; background: #000; }。

コンソールでこれらのスタイル ディメンションを変更しwidth: 1024px; height: 768px;、Galleria を実行して更新するGalleria.run('#galleriaimage_7');と、スクリプトがスタイルを解析してステージ サイズを設定します。黒い背景にはまだ余分なパディングがあるため、ステージをさらに大きくするか、スタイルを編集してパディングを削除する必要があります。

ここに画像の説明を入力

于 2013-02-24T20:08:15.537 に答える
0

ギャラリーのオプションがあります

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

たとえば、変数を使用して高さを定義できます。

于 2013-02-19T20:04:41.093 に答える