How to change the Cropper.js fixed size while cropping image?

Question

While cropping, I want this image to be positioned in the middle of my modal and in large size, but I am not able to change it.

When I try to add height, width on div and image inside modal-body, it is not working as expected. How can I fix this problem?

Here's my HTML structure:

<div class="modal fade" id="changeProfileModal" tabindex="-1" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header border-0 mb-0">
        <!-- Updated modal title class -->
        <h5 class="modal-title" id="exampleModalLabel">Adjust your profile </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"
          aria-label="Close">
        </button>
      </div>
      <div class="modal-body">
        <div id="profile-change-div">
          <img src="" alt="" id="selected-profile">
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary d-none" id="profile-confirm-btn">Crop</button>
      </div>
    </div>
  </div>
</div>

And here's my JavaScript function:

function changeProfilePicture() {
  var profileInput = document.getElementById('profile-image-input')
  var imageBox = document.getElementById('profile-change-div')
  var image = document.getElementById('selected-profile')
  var cropBtn = document.getElementById('profile-confirm-btn')
  var cropper

  document.getElementById('profile-image-input').addEventListener('change', () => {
    $('#changeProfileModal').modal('show');
    const img_data = profileInput.files[0]
    const url = URL.createObjectURL(img_data)
    cropBtn.classList.remove('d-none')
    image.src = url
    cropper = new Cropper(image, {

      aspectRatio: 1,

      crop(event) {
        console.log(event.detail.x);
        console.log(event.detail.y);
        console.log(event.detail.width);
        console.log(event.detail.height);
        console.log(event.detail.rotate);
        console.log(event.detail.scaleX);
        console.log(event.detail.scaleY);
      },
    });

  })

  $('#profile-confirm-btn').click(function (e) {
    e.preventDefault();
    cropper.getCroppedCanvas().toBlob((blob) => {
      const fd = new FormData();
      fd.append('csrfmiddlewaretoken', '{{ csrf_token }}');
      fd.append('profile_picture', blob, 'my-image.png');
      $.ajax({
        type: 'POST',
        url: $('#change-profile-form').attr('action'),
        data: fd,
        processData: false,
        contentType: false,
        success: function (response) {
          imageBox.style.display = 'none';
          cropBtn.classList.add('d-none');
          document.getElementById('profilePic').src = response.image_url
          window.location.reload()
          console.log('Image successfully uploaded:', response);
        },
        error: function (xhr, status, error) {
          console.error('Error uploading image:', error);
        },
      });
    });
  });
}