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

【问题标题】：keep img tag absolutly centered and keep ratio保持 img 标签绝对居中并保持比例
【发布时间】：2013-04-15 11:42:14
【问题描述】：

问题来了：

我有一个页面全宽的滑块，内容居中。这是一个快速的 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/

提前感谢任何帮助。

【问题讨论】：

你能在 jsfiddle 中模拟同样的吗
你在使用任何滑块插件吗？
目前还没有任何特别之处，似乎很容易使用任何内容滑块。
嘿伙计，你应该是添加了导致问题的工作代码。

标签： jquery html css

【解决方案1】：

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

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

【讨论】：