0

这与提出的其他问题类似，但有一个额外的问题，我找不到与我有同样问题的人。

我有一个 1400 像素宽的图像，即使用户正在浏览具有 800 像素分辨率的浏览器，我也希望它位于页面中间。

我不能使用背景图像，因为我需要使用 jquery 循环插件与其他一些图像一起旋转此图像。

我发现使用以下方法使图像居中的方式：

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 */
}

I had seen this technique in a recent post.

于 2013-09-25T12:55:22.330 回答