如何用全寬瀏覽器顯示圖片？

MADE我想有一個完整的寬度圖像顯示在一個網站，以使它們看起來像選項，如下所示：

|[  PICTURE  ]| <- Browsers Max Width 
|[  PICTURE  ]|

下面是一個例子：

我一直在嘗試了幾個星期來做到這一點，我試圖做style="width:100%"然而，當我這樣做，有一個在之間的巨大空白：

| [ PICTURE  ] | <- Browsers Max Width

所以我想這一點，和它的作品！

style="position: absolute; left:0px; width: 100%;"

但問題是，每當我想提下下面的圖片，就變成了同一張圖片＃1所以他們在同一地點，所以你不能告訴它在哪裏。

|[ PICTURE 1 & 2 ]| <- Browsers Max Width

我該如何工作才能讓他們一個接一個看？

來源

2014-03-04 Alan Daniel

你可以添加一些代碼來看看你到目前爲止嘗試過嗎？ –

我忘了提及這是與JQUERY MOBILE，所以它有點困難。 –

你想彼此堆疊圖像？每一個全寬？ – Omar

出現這種情況是因爲position: absolute; 而不是將它們放置到一個絕對位置的，請嘗試以下的CSS

body { 
margin: 0px; 
padding: 0px; 
}

和這個CSS添加到您的圖片：

style="width: 100%; margin: 0px;"

來源

2014-03-04 16:06:27

這將完美工作在簡單的HTML，感謝您的幫助，但是我一直在做一些測試，並且當使用JQUERY MOBILE時，它似乎不會使margin/padding爲0px。我已經嘗試過！重要但仍然..有任何幫助嗎？ –

您可能有一些其他規則會覆蓋這些規則。我認爲inline-CSS（style =「」）會覆蓋外部CSS並動態應用（通過JS），CSS也會覆蓋它。因此，您可能需要使用諸如firefox的Web開發人員工具欄等工具來檢查正在應用於您的身體標記的樣式。 –

使用jQuery你可以試試這一個：

$('img').css({ 
    'min-width', screen.width /* screen width!*/ 
});

來源

2014-03-04 16:06:30

原因重疊是position: absolute。無論何時，當你絕對定位某物時，它會將該元素從堆棧中取出（其餘元素忽略它在那裏）。你需要刪除它。

試試這個CSS（我首先從這裏開始）：

width: 100%;

，或者你可以嘗試分配使用jQuery/javascript中的動態寬度：

$(window).bind('resize', function() { 
    onWindowResize(); 
} 

function onWindowResize() { 
    var windowWidth = window.innerWidth; 
    $('image').css('width', windowWidth); 
}

您將需要更新 '形象'用某種類型的鉤子（類名稱或id或別的東西），否則這將附加到所有圖像。

來源

2014-03-04 16:17:04 Damon

如何用全寬瀏覽器顯示圖片？

回答

相關問題