具有圖像的div標籤的大小-jQuery Mobile的html5

我使用此語句在div標籤內獲取背景圖像。具有圖像的div標籤的大小-jQuery Mobile的html5

<div data-role="content" data-theme="a" style= "height:100%; background:url  
('./images/tankanzeige.png') center center no-repeat"> 
</div>

我想讓div的大小與圖像相同，但大小錯誤只顯示圖像的20％。

我必須改變什麼？

來源

2012-07-12 fluxim

所以，你想有DIV調整本身的大小你適用於它的背景圖片？ – 2012-07-12 15:04:56

是的，就像那樣！我只是想在正確的大小內顯示圖像。這不可能嗎？ – fluxim 2012-07-12 15:07:15

嗯，我認爲你希望它作爲背景圖像的原因，而不是僅僅把它放在div（因爲這將顯示所有），我假設你也不能保證圖像的大小，或者你可以把高度： 250像素;例如，但我認爲這需要在JQuery而不是CSS中完成。讓我想起答案 – 2012-07-12 15:17:39

如果要調整div以適應圖像：

如果您知道圖像的大小，那麼你必須設置div的像素大小 - 例如100px的高度和寬度200像素：

<div data-role="content" data-theme="a" style= "height:100px; width: 200px; background:url('./images/tankanzeige.png') center center no-repeat"> 
</div>

這是因爲20%意味着 - 「試圖利用母公司的20％」。

2.在div內使用圖像標籤<img>要容易得多，因爲這樣可以讓div自動擴展。

3.如果您必須使用CSS背景圖片並且不知道圖片大小，則需要使用JavaScript來獲取圖片大小。首先，您需要創建一個新的Image對象。

看到這個答案：how-to-get-image-size-height-width-using-javascript

和代碼是：

var img = new Image(); 
img.onload = function() { 
    alert(this.width + 'x' + this.height); 
} 
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

請注意，你需要的onload事件，使圖像先加載。

如果要調整CSS背景，以適應DIV：

您可以使用CSS3屬性background-size: 100%;

來源

2012-07-12 15:20:15 jfrej

謝謝你的第一個方法是正確的。顯示圖像。但它不再集中。這是爲什麼？ – fluxim 2012-07-12 15:26:48

你的意思是圖像不居中？或者'div'不居中？如果您將div的大小設置爲等於圖像的大小，那麼它們的中心應該完全重疊。居中'div'取決於其父母。嘗試設置'margin-left：auto; margin-right：auto;'在div – jfrej 2012-07-12 15:31:45

是的，謝謝它的工作！ – fluxim 2012-07-12 15:40:43

只要圖像小於窗口大小，整個圖像就會顯示在div中。以其簡化形式（您的問題中的代碼），div將佔據整個窗口。

所以，如果你的圖像沒有顯示，它太大以至於不能適應可用空間。您可以在div上設置min-height和min-width屬性，以使圖像的全部大小根據需要進行滾動。

See demo

來源

2012-07-12 15:09:28 sachleen

沒有它只有大約一半的屏幕。我認爲問題是JQuery Mobile！因爲頂部有一個標題，底部有一個頁腳。但沒有什麼大的。奇怪的事情：如果我添加

和

內的畫布，它會顯示整個圖像！這裏有什麼問題？ – fluxim 2012-07-12 15:16:23

具有圖像的div標籤的大小-jQuery Mobile的html5

回答

相關問題