Question

问题在于：

我有一个页面的滑块全宽，中心内容。这是一个快速的HTML模型供您理解：

<div class="slider">
    <div class="slide">
         <img src="01.jpg">
         <div class="wrapper">
              <h1>01</h1>
         </div>
    </div>
    <div class="slide">
         <img src="02.jpg">
         <div class="wrapper">
              <h1>02</h1>
         </div>
    </div>
    <div class="slide">
         <img src="03.jpg">
         <div class="wrapper">
              <h1>03</h1>
         </div>
    </div>
</div>

所以我希望img标签在滑块div中居中，但要完全填充它。我知道你可以这样做，如果我使用背景图像，但在这里我必须更改每张幻灯片上的背景图像，因此我尝试使用img标签。

到目前为止，这是我的css：

.slider {
    height:370px;
    width:100%;
    float:left;
    text-align: center;
    background-color: grey;
    position:relative;
    text-align: center
}

.slide img {
    height:370px;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
}

.slide .wrapper {
    position:absolute;
    top:0;
    left:0;
    z-index:2;
}

使用此解决方案，图像会在窗口调整大小时调整大小，我需要它在中心保持固定，并根据屏幕大小显示更多（因此我的图像为1920 * 370px）

这里有一个关于图像大小调整问题的快速小提琴： http://jsfiddle.net/4wZkN/

提前感谢您的帮助。

Answer 1

Fork of your fiddle。我将img更改为position：fixed并删除了宽度规范。如果调整框架大小，这可以防止滚动条并显示更多图像。这是你追求的效果吗？

.slide img {
    height:370px;
    position:fixed;
    top:0;
    left:0;
    z-index:1;
}

保持img标签绝对居中并保持比例

1 个答案: