貓頭鷹旋轉木馬自動寬度帶邊距不起作用

我的所有圖像都有固定的高度，並且隨着屏幕寬度變小，需要保持圖像的比例。貓頭鷹旋轉木馬自動寬度帶邊距不起作用

#owl-demo .item img { 
    display: block; 
    width: auto; 
    height: 300px 
}

這工作正常，直到我需要在圖像之間放置一個邊距。

#owl-demo .item { 
    margin:0 10px 0 10px; 
}

頁邊距不會顯示，圖像並排依然存在。該margin將顯示如果我把width: 100%

#owl-demo .item img { 
    display: block; 
    width: 100%; 
    height: 300px 
}

但隨後的圖像不再比例。

我試着用貓頭鷹自己的演示，這是這種情況。如果您檢查其中一幅圖像並將其更改爲width: auto頂部的代碼，則會看到邊距不再有效。您還需要從bootstrap中的img標記中刪除max-width: 100%。

http://owlgraphic.com/owlcarousel/demos/images.html

enter image description here

來源

2015-04-05 user2760338

如果我正確理解你的話，這聽起來像你需要將圖像高度更改爲最大高度或最小高度，但我不完全明白你的最終目標是什麼。我知道你想保持圖像比例，但是你的目標是保持旋轉木馬內的物品數量是否相同？否則，如果你的寬度不同，那麼你的身高也必須有所不同。另一種選擇可能是你的圖像容器有一個固定的高度，但不是圖像，然後就是容器上的「overflow：hidden」。 – 2015-04-13 02:08:52

抱歉，最終目標是在項目/圖片之間留有空白。我們的目標不是在傳送帶內保留相同數量的圖像，而是使用響應功能。隨着屏幕寬度的減小，圖像會被略微切斷（如上面的示例屏幕截圖並保持不變），直到達到特定的中斷點並減少圖像數量。 – user2760338 2015-04-15 11:42:01

看起來你正在使用的版本1.3.X

嘗試升級到2.0版本，你會沒事的。

來源

2015-09-24 04:02:34 Matt

貓頭鷹旋轉木馬自動寬度帶邊距不起作用

回答

相關問題