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

Neal Sebastian free asked 4 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 4 years ago

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

Bartosz Termena staff answered 4 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 premium answered 3 years 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.


Grzegorz Bujański staff commented 3 years 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.


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



Specification of the issue

  • ForumUser: 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