Javascript以一个图像填充浏览器

我有一个简单的网页，其中包含一个图像和一些文本。有点（简化）

图像描述

---

现在，我希望图像在浏览器中完全显示，而不考虑大小和设备。屏幕的其余部分应为黑色（或任何其他颜色），文本应位于下方，以便观看者向下滚动。 我想这可以在Javascript中完成，但老实说，我不知道如何开始。我有图像大小，但当然我既不知道浏览器分辨率，也不知道如何调整屏幕上图像的大小

如何用图像填充浏览器

[更新]一些澄清：图像可能是横向或纵向的，我总是想完整地显示图像。因此，对于portait方向的图像，图像应以屏幕为中心，高度=屏幕高度，图像的左右空间应为纯色（黑色？）。 而且图像应该保持其原始纵横比，没有失真

[更新2]在Thomas代码的帮助下，我得到了这个代码，它就在那里：

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

var imgWidth=4912.0；
var imgHeight=7360.0；
var scale=Math.min（window.innerHeight/imghight，window.innerWidth/imgWidth）；
var image=document.getElementById（'imageX'）；
image.style.height=（imghight*比例）+“px”；
image.style.width=（imgWidth*比例）+“px”；

---

demrks回答说，仅使用css就可以实现这一点很酷，但出于seo和可用性原因（例如没有alt标记），我不希望图像作为背景。

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

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

您可以在CSS文件中使用类似的内容，如果父图像小于图像尺寸，则所有图像都将调整大小

这里是相应的。尝试调整浏览器窗口的大小以

编辑： 正如在评论中提到的，您可能希望图像全屏显示，但保持图像尺寸不变。但即使是这种效果，你也可以用普通CSS解决：你必须将图像设置为“背景图像”，并将“背景大小”设置为“覆盖”（图像被裁剪）或“包含”。如果需要支持IE8（），则必须使用polyfill或use来检测浏览器是否支持“背景大小”并提供JS回退

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

您可以找到（用于“封面”）或（用于包含）

编辑2

---

您询问是否可以在全屏图像下显示文本。当然，只需在包含图像的div下面创建其他div。如果向下滚动，我会使用示例文本更新。

如果希望图像与屏幕一样宽并保持其比例

---

如果您希望图像扭曲并填充整个屏幕，可以使用jQuery$（window.width（）&$（window.height（））获取屏幕大小，并根据它设置img宽度/高度：

$（“img.yourgClasshere”）.css（{“width”：$（window.width（），“height”：$（window.height（））
这是如何将图像设置为任何设备的最大宽度和高度

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

在javascript中，您可以这样尝试

首先，将图像元素id命名为='imageX'

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

但是用css语句做背景：封面-webkit背景：封面；可能会看起来更好，因为它不会扭曲图像。
删除宽度和高度属性并添加style=“width:100%”是否要将图像拉伸到100%的高度/宽度，而不管图像的比例如何？请尝试使用div代替，并使用图像作为“背景大小：封面”（CSS3）的背景。否，长宽比应保持不变，无变形。宽度=100%不适用于纵向图像，图像的底部将丢失。100%的高度/宽度是什么方式？“屏幕的其余部分应为黑色（或任何其他颜色）”。这听起来不像是100%的高度/宽度。请在浏览器中填充图像。现在，我希望图像在浏览器中完全显示。如果图像高度大于屏幕高度，则图像底部将被裁剪，但我希望显示完整图像（在这种情况下更小）。背景大小：封面也会将图片底部切掉，如果它高于屏幕高度。如果图片高度大于屏幕高度，图片底部将被切断，因此在某些情况下，这不会显示完整图像，只是一个裁剪。背景：如果图片高于屏幕，封面会切断图片底部，因此这对我不起作用。只要我知道如何在html代码中实现它，我就会尝试使用javascript（没有JS知识）。就快到了-现在我只需要去掉浏览器窗口和图像之间的默认边距。为此，只需将body元素设置为如下内容：body{margin:0；padding:0；}
 var image = document.getElementById('imageX');
 image.style.height = parseInt(window.innerHeight) + 'px';
 image.style.width = parseInt(window.innerWidth) + 'px';