帶有圖像的div標簽的大小 - 帶有JQuery Mobile的html5

Question

我使用此語句在div標簽內獲取背景圖像。

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

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

我需要改變什么？

Answer 1

如果要調整div大小以適合圖像：

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

<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%;

Answer 2

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

因此，如果您的圖像沒有顯示，則它太大而無法容納可用空間。 您可以在div上設置min-height和min-width屬性，以使圖像的完整大小使頁面根據需要滾動。

見演示