javascript將圖像調整爲全屏並保持寬高比

我有一個手機幻燈片，我想要一個全屏選項。我創建了一個可以正常工作的僞全屏CSS，但是它會延伸圖像以填充。我已經嘗試了一些技術，比如將其封裝在div中，並將CSS設置爲自動高度和寬度，但仍然延伸。javascript將圖像調整爲全屏並保持寬高比

該CSS只是將所有設置爲0左上角和右下角。我知道它是一個「黑客」，但這對我的HTML5視頻非常有用，它甚至保持了比例。雖然對圖像不太熱。我已經嘗試過CSS3對象適合，但幾乎沒有瀏覽器支持afaik。

有沒有辦法讓圖像變爲全屏並保持寬高比？也許可以使用像外觀一樣的信箱來填充其他空間（垂直或水平）。我需要這是動態的，因此它可以在多種不同屏幕尺寸的移動設備上運行。我在移動設備上看到了谷歌圖片上的這項工作，但顯然他們比我更聰明。

我在後端使用jQuery Mobile和PHP。我認爲JS解決方案是最好的，但PHP也會受到歡迎。

2012-07-10 John S

我相信你正在尋找background-size屬性。從CSS3開始，您可以將其設置爲contain或cover。

含有，指定背景圖像的規模應儘可能大，同時確保它的兩個尺寸小於或等於背景定位區域的相應的尺寸。

蓋，指定背景圖像的規模應儘可能小，同時確保它的兩個尺寸大於或等於背景定位區域的相應的尺寸。

background-size : cover將是一個全屏幕圖像和background-size : contain將信箱效果。

2012-07-10 16:08:48 Jasper

很酷我會嘗試它，當我回家，我會讓你知道。這聽起來像它會工作得很好，並顯然在所有瀏覽器支持。 – 2012-07-10 16:40:30

其實我記得有關這個的閱讀，我沒有嘗試它，因爲我認爲它只適用於背景。所以現在我不知道它會工作。我仍然會嘗試並在此處發佈我的結果。 – 2012-07-10 16:53:54

「背景大小」只適用於背景圖像。所有你需要做的是創建一個全寬/高的容器，然後設置'background-size：contains'，你會在小維上得到信箱欄。 – Jasper 2012-07-10 17:04:54

回答