如何更改JavaScript库中更改图像的大小？

Question

我正在为我的WordPress网站制作一个新的自定义插件，该插件使用短代码显示图片库：

[galleryplugin]

该插件使用PHP和JavaScript。 从本质上讲，我希望短代码显示图库，但确实如此，但是我需要图像大小相同。我试图用<div>制作一个特定的size = height:"100px";width:"50px"标签，但是这样做的时候：

1. 图像（我认为）没有达到这样的大小
2. “下一个”功能（损坏的图像按钮）不会将图像移至下一个图像

有人知道如何解决此问题吗？ 谢谢您的提前答复！

代码 PHP：

<?php
/**
 * Plugin Name: Eddie's Tech Gallery
 * Description: Custom gallery plugin by Eddie's Tech
 * Version: 1.0
 * Author: Eddie's Tech
 * Author URI: https://www.eddiestech.co.uk
 */


function load_js() {
 if (is_front_page()) {
     wp_enqueue_script( 'gallery', plugins_url( '/gallery.js', __FILE__ ),array(),time());
 } 
}
add_action('wp_enqueue_scripts','load_js');

add_shortcode('galleryplugin', 'shortcode');
function shortcode() {
    ?>
    <br />
        <img id="whiteBox" src="/wp-content/plugins/gallery/imgs/img1.png"></img>
        <a href="#" onclick="next();return false;"><img src="next.png"/></a>
    <br />
    <?
}
?>

代码 JS：

var myImage= new Array(); 
myImage[0]="/wp-content/plugins/gallery/imgs/img1.png";       
myImage[1]="/wp-content/plugins/gallery/imgs/img2.png";
myImage[2]="/wp-content/plugins/gallery/imgs/img3.png";

var ImageCnt = 0;

function next(){
    ImageCnt++;

    ImageCnt %= myImage.length

    document.getElementById("whiteBox").src = myImage[ImageCnt];
  }