大幻灯片/画廊固定高度

Question

我试着让我的幻灯片，以这样的表现：

1. 如果浏览器窗口小于或相同的宽度为我的形象更广泛的 - 的形象应该是窗口的100％ ，但不高于450px（切割溢出）。这很容易做到但是

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 */
}

这会强制图像以容器为中心，即使图像比容器大。