установить ширину и высоту свойства класса для загружаемых изображений

Question

У меня есть массив изображений images , имеющий четыре случайных изображения,

background-image в стиле css класса содержание изменять сына при каждом нажатии кнопки, иметь builddimage и changeImage

Возможно ли установить ширину и высоту каждого изображения , загруженного в класс содержание должно быть ширина и высота класса

Как этого добиться?

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>