大幻燈片/畫廊固定高度

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

這會強制圖像以容器爲中心，即使圖像比容器大。