滑塊的寬度和高度，無需拉伸

Question

我正在為我的一個朋友創建一個網站。 只有一個問題。 如果沒有拉伸，滑塊將無法放入框架中。

我已將其設置為100％的高度，但無法解決。 （它也有響應）我希望它在原始寬度和高度（100x100、200x200等）下不拉伸（200x500）時是一個不錯的圖像。

我希望你們能在這方面幫助我。 我嘗試了很多，還問了其他人，但他們對此無能為力。

您可以在此處看到滑塊。 http://tinyurl.com/p36hz6u

這是滑塊的另一個版本，但是在此版本上，滑塊圖像被截斷了http://tinyurl.com/nfjjvwu

Answer 1

如果圖像是背景圖像，請考慮使用background-size:contain; 這將使圖像可以放大到可見/可能的大小而無需拉伸，然后可以使用背景位置將背景圖像放置在所需background-position

如果幻燈片具有實際的物理<img />標簽，則我制作了一個JSfiddle來演示代碼，該代碼將在元素中包含圖像。 在此示例中， <div>標記表示瀏覽器窗口，並且可以調整大小： http : //jsfiddle.net/dds27w2y/

Answer 2

首先，我要做的是刪除： background-size: 100% 100%並添加background-position: center center 。 然后，我將添加background-color: white至容器。 這將使其看起來更好，並且將居中。