jquery - 带有图像的 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 上设置 amin-height和min-width属性，以使图像的全尺寸使页面根据需要滚动。

看演示