Как установить высоту изображения в скрипте

Question

В настоящее время я пытаюсь создать баннер, отображающий случайные изображения при каждом обновлении. Мне удалось заставить это работать, но мне нужно изменить высоту изображений до 139 пикселей, а не показывать их в полном размере. Как я могу установить высоту изображений в скрипте, который загружает изображения в произвольном порядке?

Я выучил код 15 лет назад в школе, так что мое понимание этого сейчас в основном 0, так что я легко теряюсь! Возможно, есть лучший способ загрузки случайных изображений для начала, но это был единственный способ, с помощью которого я смог приступить к работе.

<div style="position:absolute;top:0;left:1072;height:139px;overflow:hidden;" class="banner3"></div>

<script>
      var randomImage = {
        paths: [
          "c1.png",
          "c2.png",
          "c3.png",
		  "c4.png",
		  "c5.png",
		  "c6.png",
		  "c7.png",
        ],
        generate: function(){
          var path = randomImage.paths[Math.floor(Math.random()*randomImage.paths.length)];
          var img = new Image();
          img.src = path;
          $("div.banner3").html(img);

        }
      }
      randomImage.generate();
	 
</script>

Answer 1

используйте document.createElement вместо изображения, например:

var randomImage = {
    paths: [
      "c1.png",
      "c2.png",
      "c3.png",
      "c4.png",
      "c5.png",
      "c6.png",
      "c7.png",
    ],
    generate: function(){
      var path = randomImage.paths[Math.floor(Math.random()*randomImage.paths.length)];
      var img = document.createElement('img');
      img.src = path;

      img.height = DESIRED HEIGHT

      $("div.banner3").html(img);

    }
  }
  randomImage.generate();

Answer 2

Вы можете сделать это в CSS:

var randomImage = {
  paths: [ "https://picsum.photos/id/1/300/300",
          "https://picsum.photos/id/2/300/300",
          "https://picsum.photos/id/3/300/300",
          "https://picsum.photos/id/4/300/300",
          "https://picsum.photos/id/5/300/300",
          "https://picsum.photos/id/6/300/300",
          "https://picsum.photos/id/7/300/300" ],
  generate: function(){
    var path = randomImage.paths[Math.floor(Math.random()*randomImage.paths.length)];
    var img = new Image();
    img.src = path;
    $("div.banner3").html(img);
  }
}

randomImage.generate();

.banner3 {
  position: absolute;
  top: 0;
  left: 0;
  height: 139px;
  overflow: hidden
}
.banner3 img {
  height: 139px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="banner3"></div>

Answer 3

Вы можете попробовать это:

var path = randomImage.paths[Math.floor(Math.random()*randomImage.paths.length)];
var img = new Image();
img.src = path; 

После этого вы можете добавить:

img.style.height = '139px';

И затем установить его в html:

$("div.banner3").html(img);