Javascript 如何确保宽度为100%？

我有一堆可变的图像，当页面加载时会随机显示。我的问题是如何确保这些可变图像的宽度为窗口的100%，以便在显示图像时能够调整其大小，从而做出响应。如果可能的话，我想针对下面的Javascript/Jquery。还有，有没有办法不附加到的div类

------->Javascript

<div class="box">
<!------------Random Image script   start  below------------>
<div id="main-image"><script type="text/javascript">
var images = ['typewriter.jpg','tygsdfgr.jpg', 'gdadfa.jpg', 'fasdfd.jpg'];
$('.box').css({'background-image': 'url(images/cover-images/' + images[Math.floor(Math.random() * images.length)] + ')'});
$('<img src="images/cover-images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('.box');
</script></div>
<!------------Random Image script   END------------>
</div>

---

确保您希望它填充的任何区域都有一个位置

相对

、

绝对

或

固定

，否则它将向上传播，直到找到相关的内容。换句话说-

需要是其中之一。

如果要检查图像的宽度是否等于窗口的宽度，请执行以下操作：

让图像id为

id=img

则条件为->

if（$（'#img'）.width（）==$（window.width（））{}

要获得简单正确的图像宽度->

---

var image=$（'#img'）.width（）
您的CSS没有设置图像元素的宽度。它设置了容器div的宽度。同时，您也将图像应用为CSS背景。使CSS背景缩放到元素全宽的唯一方法是使用repeat属性，这将导致它平铺

我不确定你想做什么是个好主意。如果父容器比图像文件大得多，则根据父容器的尺寸重新调整图像大小将使图像看起来非常像素化

也就是说，您可以编写resizeImage（）方法，该方法获取父容器的宽度和高度，并相应地设置图像的尺寸。可以使用jQuery.width（）和.height（）获取父容器维度。将图像附加到父容器。将其用作内联图像。不要将其作为CSS背景应用。在追加图像后调用resizeImage（）。将处理程序函数绑定到$（window）.resize（）事件，该事件调用resizeImage（）。这样，当重新调整浏览器窗口的大小时，图像将相应地进行调整
 要使图像标签填满整个窗口，只需使用一点css：

#main-image img {
    width: 100%;
}

您不应该同时在
上制作
背景图像。只需图像标签就足够了


或者，您可以只使用
背景图像
，并使用
背景大小：封面
或
背景大小：包含
，但在某些旧浏览器中不支持此功能。它还需要javascript来计算要使用的高度。因为这更复杂，支持也更少，所以我不建议这样做。我建议你只使用上面的
标记。
你能创建一个小提琴链接吗？你是想让
中的背景图像是窗口大小的100%，还是
是窗口大小的100%？还是两者都有？@chowey我正在尝试获取未使用的“box”div中的图像，以调整窗口的100%大小。此外，这里还有一个小提琴，显示填充窗口的不同大小的图像。谢谢，这就是我最终要做的。首先，我自己在css中做了一个直接的img标记，然后是上面的内容。不管怎样，谢谢。
#main-image {
  display: block;
  right: 0;
  left: 0;
  position: relative;
}

#main-image img {
    width: 100%;
}