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

Question

问题是:

我有一个页面全宽的 slider ，内容居中。 这里有一个快速的 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 标签在 slider div 中居中，但完全填充它。我知道如果我使用 background-image 你可以做到这一点，但在这里我必须更改每张幻灯片上的背景图像，因此我尝试使用 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

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

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