具有图像的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

回答

相关问题