jquery - 大型幻灯片/画廊固定高度

Question

我试图让我的幻灯片表现得像这样:

1. 如果浏览器窗口比我的图像宽或与我的图像宽度相同 - 图像应该是窗口的 100%，但不高于 450 像素(剪切溢出)。这很容易做到，但是

2. 如果浏览器窗口比我的图像窄，则图像应居中，然后在左右两侧剪切。我仍然想要一个固定的高度。像这样:

这个有插件吗？我试图修改一些但无法让 nr 2 工作

Answer 1

你的图片也有固定宽度吗？如果是这样，您可以使用以下解决方案:

1. 创建一个包含您的图像的容器

   .container {
position:relative;
height:450px;
overflow:hidden;
}

2. 将你的图片放入容器中，然后添加以下css

   .container img {
width:600px;
position:relative;
left:50%;
margin-left:-300px; /* minus half of the width */<br/>
}

这将强制图像以容器为中心，即使图像比容器大也是如此。