为加载的图像设置类的宽度和高度属性

Question

我有一个图像数组 images 有四个随机图像，

contents类css样式的背景图片每次点击按钮都会改变，有buildimage和changeImage

是否可以将加载到类 contents 中的每个 图像 设置宽度和高度 为 same 宽度和班级高度

如何实现？

var images = ['https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random'];
var index = 0;

function buildImage() {

    document.getElementById('content').style.backgroundImage = 'url('+images[index]+')';

}

function changeImage() {
    index++;
    if (index >= images.length) index = 0;
    document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
}

.contents {
    width: 70%;
    height: 50%;
    border: 2px solid #FF0000;
}
p{
color:#00FF00;}

<div class="contents" id="content"><p>set background image height ans width same as this box </p></div>
<button onclick="changeImage()">NextImage</button>

Answer 1

您可以简单地使用 CSS 来缩放图像，将 background-size 设置为 100%：

background-size: 100% 100%;

这样，图像的缩放与其容器的尺寸完全相同。这是工作示例：

var images = ['https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random', 'https://picsum.photos/200/300/?random'];
var index = 0;

function buildImage() {

  document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';

}

function changeImage() {
  index++;
  if (index >= images.length) index = 0;
  document.getElementById('content').style.backgroundImage = 'url(' + images[index] + ')';
}

.contents {
  width: 70%;
  height: 50%;
  border: 2px solid #FF0000;
  background-size: 100% 100%;
}

p {
  color: #00FF00;
}

<div class="contents" id="content">
  <p>set background image height ans width same as this box </p>
</div>
<button onclick="changeImage()">NextImage</button>