0

これは他の質問と似ていますが、1 つ追加の問題があり、私と同じ問題を抱えている人を見つけることができません。

ユーザーが解像度 800px のブラウザを使用している場合でも、幅 1400px の画像をページの中央に配置したいと考えています。

jquery サイクル プラグインを使用して、この画像を他のいくつかの画像と一緒に回転させる必要があるため、BackGround 画像を使用できません。

次を使用して画像を中央に配置する方法を見つけました。

div.slideshowWrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}
  div.slideshowWrap div.homeslideshow {
  position: relative;
  width: 10000px;
  left: 50%;
  margin: 0 0 0 -5000px;
  text-align: center;
}

<div class="slideshowWrap">
    <div class="homeslideshow">
        <?php echo $this->Html->image('background_01.jpg');?>
    </div>
</div>

動作しますが、jquery サイクルに必要な追加のスライドを追加すると、配置が台無しになります...

<div class="slideshowWrap">
    <div class="homeslideshow">
        <?php echo $this->Html->image('background_01.jpg');?>
    </div>
    <div class="homeslideshow">
        <?php echo $this->Html->image('background_02.jpg');?>
    </div>
    <div class="homeslideshow">
        <?php echo $this->Html->image('background_03.jpg');?>
    </div>
</div>

これを整理する最良の方法は何ですか？画像を中央に配置する方法はないようです。背景のみです。しかし、jquery サイクル プラグインのように背景をフェード インおよびフェード アウトする方法はありません。

誰でもアイデアはありますか？

4

1 に答える 1

0

これを試して：

.homeslidshow { 
    position: relative; /* if there is no position applied already */
}

.homeslideshow > img{
    position: absolute;
    left: 0px;
    right: 0px;
    /* and your width here */
}

このテクニックは、最近の投稿で見たことがあります。

于 2013-09-25T12:55:22.330 に答える