Resize image display to size of mdb-file-upload

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

Neal Sebastian asked 5 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.)

Arkadiusz Idzikowski staff commented 5 years ago

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

Add comment

Bartosz Termena staff answered 5 years ago

2 0 Best answer

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.

Add comment

JeroenVunderink pro premium answered 4 years ago

0 0 Best answer

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 4 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?

Add comment

Write

Create snippet

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

Neal Sebastian

15Support score
3Questions 0Answers

0Snippets likes 0Snippets