如何動態設置幻燈片放映的寬度和高度

我已經在一個名爲幻燈片放映的div中使用圖片設置了一個網頁。 div應該是最大寬度爲1600px，最大高度爲600px（此處使用的原始jpg的寬度和高度），並在屏幕較小或調整大小時動態縮小。如何動態設置幻燈片放映的寬度和高度

因爲圖像的行爲是由CSS設置如下這工作得很好：

.slideshow img{ 
    margin:0 auto; 
    width: 100%; 
    max-width: 1600px; 
    min-width: 900px; 
}

現在我想通過與來自Pixedelic相機幻燈片更換圖像來達到同樣的效果。但是在這裏，我無法使用.slideshow img {}控制圖像，因爲腳本使用了div而不是圖像標記。

相機幻燈片的寬度和高度由jQuery函數控制。我已經把一個.slides DIV幻燈片，我試圖通過CSS來控制，這樣的：

.slideshow .slides{ 
    display: block; 
    margin:0 auto; 
    max-width: 1600px; 
    max-height: 600px; 
    overflow:visible; 
}

（溢留給可見看看會發生什麼）

當我指定一個高度值（即600像素）的功能，幻燈片加載在它的最大高度，但是當網頁被調整下來不縮水：http://www.centredelafontaine.be/testpage1.html

當我離開的高度和寬度值的功能空白，幻燈片縮小的調整大小，但打開高度爲800px（？），並在內部產生更大的圖像，溢出放置的div elow：http://www.centredelafontaine.be/testpage2.html

任何人都可以幫我解決這個問題嗎？

2014-01-24 Truncatus

帶有簡單圖像的工作示例位於：http：//www.centredelafontaine.be/testpage3.html。 – Truncatus

測試頁1和2加載相同，都比測試頁3的高度高。爲什麼不使用百分比高度？ –

謝謝Zach。在jQuery函數中使用百分比高度和寬度是個好主意。 – Truncatus

將img標籤放在div的內部，幻燈片中包含這個標籤，您將可以通過CSS代碼修改這些圖片（幻燈片元素）屬性。

<div id="image" div class="Slides w3-display-container"> 
    <img src="your_image.png" height="600" width="1600"> 
    </div>

如果你不能做出來給我留下了答覆，我將做一個演示HTML

2017-05-03 18:31:51

僅設置最低高度圖像。 Slidehow容器將取決於圖像高度。意味着無需設置slidehow容器高度。

2017-05-03 19:54:32 Super

回答