Resize image display to size of mdb-file-upload


Topic: Resize image display to size of mdb-file-upload

Neal Sebastian asked 3 years ago

Expected behavior When I select or drag over an image file to the mdb-file-upload plugin, the image shown should be the same size as the plugin so that the whole image is displayed.

Actual behavior Image preview only shows a portion of the image.

Resources (screenshots, code snippets etc.) screenshot


Arkadiusz Idzikowski staff commented 3 years ago

Thank you for reporting this problem, we will take a closer look at that.


Bartosz Termena staff answered 3 years ago

Dear @Neal Sebastian

As a workaround try to add this code to your styles.scss:

.file-preview {
    span {
     width: auto;
     height: 100%;
     .file-preview-img {
       max-height: 100%;
       max-width: 100%;
    }
  }
}

Hope it helps!

Best Regards, Bartosz.


JeroenVunderink pro premium answered a year ago

Hi Bartosz,

Need this as well. Added the style to my page SCSS file but there is no difference. The image preview is centered but not fully visible.

Am I doing something wrong? Using the the mdb-file-upload-10.0.0.

Thanks in advance for your reply.

Jeroen


Grzegorz Bujański staff commented a year ago

We need more information to check it out. Do you add code in style.scss? Have you added other styles that may conflict with the solution above?


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.3.1
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No