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

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

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