帶固定比例和最小寬度的傳送帶圖像

我期待創建一個像https://squareup.com/這樣的傳送帶。我希望圖像具有固定的比例，最小的寬度並可處理高達1400px寬的屏幕。我嘗試使用CSS的所有內容都打破帶固定比例和最小寬度的傳送帶圖像

CSS：

.carousel .item { 
    height: 800px; 
} 
.carousel img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    min-width: 1400px; 
    height: 100%; 
}

是否有響應插件或圖像滑塊我可以使用？或者我可悲的不知道的CSS技巧。

來源

2013-04-01 Akito

如果你正在尋找一個插件，Bootstrap有一個輪播：http://twitter.github.com/bootstrap/javascript.html#carousel。 –

我已經使用bootstrap旋轉木馬。問題在於它如何工作並不能產生我想要的結果。對於img比率，最小寬度等，我無法讓這個傳送帶充當方形頁面。 – Akito

Twitter傳送帶即開即用。首先，如果您想屏幕高達 1400px，請將min-width: 1400px;更改爲max-width: 1400px;。

但是，你沒有得到固定比率（在你的例子中沒有固定比例）。爲此，您可以使用CSS3媒體查詢來更改圖片的寬度和高度。

來源

2013-04-03 12:47:54

帶固定比例和最小寬度的傳送帶圖像

回答

相關問題