Question

使用javascript数组加载div中的随机图像 Javascript代码工作得很好但是即使在使用css到div之后，加载的图像也以实际大小显示并相互重叠有没有办法在javascript中调整图像大小或任何其他方式使他们适合特定大小的div

这里是我直接在html文件中使用的javascript：

<div class="glbx-small">

       <script>    
           var arrayImg = new Array();
           arrayImg[0] = "a1.jpg";
           arrayImg[1] = "a2.jpg";


            getRandomImage(arrayImg, "");

          function getRandomImage(imgAr, path) {
            path = path || 'images/'; // default path here
            var num = Math.floor( Math.random() * imgAr.length );
            var img = imgAr[ num ];
            var imgStr = '<img src="' + path + img + '" alt = "">';
            document.write(imgStr); document.close();
}

         </script>

</div>

用于glbx-small的css：

.glbx-small {
    align-content: center;
    width: 18%;
    height: 6vw;
    border: thin solid #B0B0B0 1px;
    justify-content: center;
}

Answer 1

也许是这样的？

.glbx-small img {
  max-width: 100%;
}

Answer 2

使用

.glbx-small img {
    width: 100%;
    height: auto;
}

调整从Javascript数组加载的图像的大小

2 个答案: