Question

我有一堆可变图像，在页面加载时会随机显示。我的问题是如何确保任何这些可变图像的宽度是窗口的100％宽度，这样当显示图像时，它可以调整大小，因此可以响应。如果可能的话，我想在下面定位Javascript / Jquery。还有，有没有办法不附加到div类？

-------＆GT;的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>

---------＆GT; CSS

#main-image {
    position:relative;
    top:0px;
    width:100%;
    height:auto;
    margin:0px;
    padding:0px;
}

Answer 1

#main-image {
  display: block;
  right: 0;
  left: 0;
  position: relative;
}

确保您要填充的任何区域的位置都为relative，absolute或fixed，否则它会一直向上传播，直到找到与之相关的内容为止。换句话说 - <div class="box">必须是其中之一。

Answer 2

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

让图片ID为id=img，条件将为＆gt;

if($('#img').width()==$(window).width()){}

使图像宽度合适 - ＆gt;

var image=$('#img').width();

Answer 3

您的CSS未设置图像元素的宽度。它设置容器div的宽度。您还将图像应用为CSS背景。使CSS背景缩放到元素的整个宽度的唯一方法是使用repeat属性，这将导致它平铺。

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

话虽这么说，你可以写一个resizeImage（）方法，它获取父容器的宽度和高度，并相应地设置图像的尺寸。您可以使用jQuery .width（）和.height（）来获取父容器维度。将图像附加到父容器。将其用作内嵌图像。不要将其作为CSS背景应用。添加图像后调用resizeImage（）。将处理函数绑定到调用resizeImage（）的$（window）.resize（）事件。这样，当重新调整浏览器窗口大小时，图像将相应地调整。

Answer 4

要使图像标记填满整个窗口，只需使用一点css：

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

您不应该同时在background-image上执行<div class="box">。只需图片标记即可。

或者，您只能使用background-image并使用background-size: cover或background-size: contain，但某些较旧的浏览器不支持此功能。它还需要javascript来计算要使用的高度。由于这更复杂，支持更少，我不建议这样做。我建议您只使用上面的<img>标记。

我如何确保宽度为100％？

4 个答案: