Reels display is not fit in div

Hi I tried to make a slot machine game using this packagehttps://github.com/SMESH109/ycg-slotmachine/tree/master?tab=readme-ov-file

My problem is that the reel display is not cover/fit inside the div slot-machine

this my script

<script setup>
import { ref, computed, nextTick, onMounted } from "vue";
import AdminLayout from "@/Layouts/Admin.vue";
import background from "../../../assets/img/slot-bg.jpeg";
import startImage from "../../../assets/img/start.png";
import slotMachineImage from "../../../assets/img/slot-box.png";
import { Fireworks } from "fireworks-js";
import SlotMachine from "slot-machine-gen";
import reel1 from "../../../assets/img/reel-strip1.png";
import reel2 from "../../../assets/img/reel-strip2.png";
import reel3 from "../../../assets/img/reel-strip3.png";
import "slot-machine-gen/dist/slot-machine.css";

const slotMachine = ref(null);

const reels = [
  {
    imageSrc: reel1,
    symbols: [
      {
        title: "cherry",
        position: 100,
        weight: 2,
      },
      {
        title: "plum",
        position: 300,
        weight: 6,
      },
      {
        title: "orange",
        position: 500,
        weight: 5,
      },
      {
        title: "bell",
        position: 700,
        weight: 1,
      },
      {
        title: "cherry",
        position: 900,
        weight: 3,
      },
      {
        title: "plum",
        position: 1100,
        weight: 5,
      },
    ],
  },

  {
    imageSrc: reel2,
    symbols: [
      {
        title: "cherry",
        position: 100,
        weight: 2,
      },
      {
        title: "plum",
        position: 300,
        weight: 6,
      },
      {
        title: "orange",
        position: 500,
        weight: 5,
      },
      {
        title: "bell",
        position: 700,
        weight: 1,
      },
      {
        title: "cherry",
        position: 900,
        weight: 3,
      },
      {
        title: "plum",
        position: 1100,
        weight: 5,
      },
    ],
  },
  {
    imageSrc: reel3,
    symbols: [
      {
        title: "cherry",
        position: 100,
        weight: 2,
      },
      {
        title: "plum",
        position: 300,
        weight: 6,
      },
      {
        title: "orange",
        position: 500,
        weight: 5,
      },
      {
        title: "bell",
        position: 700,
        weight: 1,
      },
      {
        title: "cherry",
        position: 900,
        weight: 3,
      },
      {
        title: "plum",
        position: 1100,
        weight: 5,
      },
    ],
  },
];

const callback = () => {};
const options = {};

const betAmount = ref(null);
const start = ref(false);
const disableReset = ref(true);
const noBetAmount = ref(false);
const winnerText = ref(false);
const loserText = ref(false);
const fireworks = ref(false);

const startGame = () => {
  if (validBetAmount.value) {
    console.log("click");
    noBetAmount.value = false;
    start.value = true;
    disableReset.value = false;
    slotMachine.value.play();
  } else {
    noBetAmount.value = !validBetAmount.value;
  }
};

const resetButton = () => {
  console.log("click");
  disableReset.value = true;
  betAmount.value = null;
  winnerText.value = false;
  loserText.value = false;
};

const validBetAmount = computed(() => {
  return betAmount.value !== null && betAmount.value > 0;
});

const containerFireworks = ref(null);
const fireworksEffect = ref(null);
let container = ref(null);

onMounted(() => {
  containerFireworks.value = document.querySelector(".containerFireworks");

  if (containerFireworks.value) {
    fireworksEffect.value = new Fireworks(containerFireworks.value, {});
    fireworksEffect.value.start();
  }

  container = document.getElementById("slot-machine");
  slotMachine.value = new SlotMachine(container, reels, callback, options);
});
</script>

This is how I display

<div id="slot-machine" class="slot-machine"></div>

Im using vue 3 composition API