JavaScript以一个图像填充浏览器

我有一个简单的网页，其中包含一个图像和下面的一些文本。种类（简单）JavaScript以一个图像填充浏览器

<html> 
    <body> 
    <img src="image.jpg" width="1920" height="1024"> 
    <br/> 
    <p>Image description</p> 
    </body> 
</html>

现在我希望图像在浏览器中显示完整，无论大小和设备如何。屏幕的其余部分应该是黑色（或其他颜色），文本应该在下面，以便观众可以向下滚动。我想这可以在Javascript中完成，但我真的没有线索如何开始。我确实有图像大小，但我当然不知道浏览器分辨率，也不知道如何调整屏幕上的图像大小。

如何将图像填充到浏览器中？

[更新]一些说明：图像可能处于横向或纵向方向，我总是想要显示完整的图像。因此，对于肖像方向的图像，图像应该以高度=屏幕高度的屏幕为中心，并且图像的左右空间应该是一些纯色（黑色？）。图像应保持原有的长宽比，不变形。

[更新2]随着托马斯代码，帮助我得到这个代码，这是近有：

<img id="imageX" src="stjuergenkirchenachts.jpg"/> 

<script type="text/javascript"> 
var imgWidth = 4912.0; 
var imgHeight = 7360.0; 
var scale = Math.min(window.innerHeight/imgHeight, window.innerWidth/imgWidth); 
var image = document.getElementById('imageX'); 
image.style.height = (imgHeight * scale) + 'px'; 
image.style.width = (imgWidth * scale) + 'px'; 
</script>

demrks回答来实现这个只是用CSS是很酷，但我不希望图像作为背景为了seo和可用性的原因（例如没有alt标签）。

来源

2013-12-20 Sam

删除宽度和高度属性并添加style =“width：100％;” – Leeish

无论图像比例如何，您是否想将该图像拉伸至100％的高度/宽度？ – putvande

尝试把div代替，并使用图像作为背景'背景大小：封面'（CSS3） – haldagan

在javascript中，你可以尝试就这样。

首先，命名您的图像元素的id = 'IMAGEX'

var image = document.getElementById('imageX'); 
image.style.height = parseInt(window.innerHeight) + 'px'; 
image.style.width = parseInt(window.innerWidth) + 'px';

但与CSS语句的背景做：盖; -webkit-背景：盖;可能会更好看，因为它不应该扭曲图像。

来源

2013-12-20 23:33:22

背景：如果屏幕高于屏幕，封面会切断图片的底部，所以这对我不起作用。我会尝试JavaScript一旦我得到一个线索如何在HTML代码中实现它（没有JS知识）。 – Sam

几乎在那里 - 现在我只需要摆脱浏览器窗口和图像之间的默认边距。 – Sam

为此，你只需要设置你的body元素如下：body {margin：0; padding：0;} –

您不必使用Javascript来调整图像大小。你可以使用基本的CSS。

img { 
    max-width: 100%; 
    height: auto; 
}

你可以使用这样的事情在你的CSS文件，如果他们的父母比图像尺寸更小的图像都将调整。

这里是相应的JSfiddle。尝试调整您的浏览器窗口中...

编辑： 正如你可能想要的形象是全屏的，但保持图像尺寸不变的评论中提到。但即使这种效果，你可以用纯CSS解决：你必须将图像设置为“背景图像”，并设置“背景大小”为“覆盖”（图像被裁剪）或“包含”。如果您需要支持IE8（which doesn't support background-size），则必须使用polyfill或使用Modernizr来检测浏览器是否支持“background-size”并提供JS后备。

.anyelement { 
    background-image: url("test.jpg"); 
    background-size: cover; /* or "contain" */ 
    background-position: center center; /* center image */ 
    background-repeat: no-repeat; 
}

您可以找到JSfiddle here（为 “盖”）或this one（含供）。

编辑2 你问是否有可能在全屏图像下面有文字。当然，只需在您的div下创建其他div，其中包含图像。如果向下滚动，我使用示例文本更新了JSfiddle。

来源

2013-12-20 23:12:44 Daniel

这种100％高度/宽度以何种方式？ – putvande

“屏幕的其余部分应该是黑色（或任何其他颜色）”。这听起来不像100％的高度/宽度。 – Daniel

_fill浏览器与image_确实。 _现在我希望图像在浏览器中完全显示_也是。 – putvande

<img src="image.jpg" width="1920" height="1024" style="width: 100%; height: auto;">如果您希望图像与屏幕一样宽并保持其比例。

如果你想要图像扭曲并填充整个屏幕，你可以使用jQuery $（window）.width（）& $（window）。高度（）在此基础上得到的屏幕尺寸，并设置IMG宽度/高度：$("img.yourImgClassHere").css({"width" : $(window).width(), "height":$(window).height()});

来源

2013-12-20 23:19:11 AVAVT

如果图片高度大于屏幕高度，图片底部将被截断，因此在某些情况下，这不会显示完整图像，只是一个裁剪。 – Sam

这是如何设置的图像到任何设备的最大宽度和高度

element.style.backgroundSize = screen.availWidth +'px '+ screen.availHeight+'px';

来源

2013-12-20 23:21:42

JavaScript以一个图像填充浏览器

回答

相关问题