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

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 * 370 像素）

这是一个快速解决图像大小问题的方法：http: //jsfiddle.net/4wZkN/

提前感谢任何帮助。

Answer 1

你的小提琴的叉子。我将 img 更改为 position:fixed 并删除了宽度规范。如果您调整框架大小，这可以防止滚动条并显示更多图像。那是你想要的效果吗？

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