Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Uploaded image don't use all the available space when using init-max-area="true"

See original GitHub issue

I’ve been trying to use ui-cropper to crop and upload an image. To do this, I created a div to show the uploaded image and the crop tool, using the following code:

        image="headerImage | ngfDataUrl"

    <img ng-src="{{croppedDataUrl}}" alt=""/>

But when I upload an image, the image is not using the entire space of the ui-crop area, like this: captura de tela de 2016-12-20 08-55-35

What can it be?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:10 (3 by maintainers)

github_iconTop GitHub Comments

smohammedyasincommented, Feb 20, 2017

i was having same issue. after i added reference of ui-cropper.css then canvas worked perfectly.

CrackerakiUAcommented, Dec 21, 2016

I am not using this feature, but from what i have seen in my tests, you have to add something in the css. In near feature i will checkup codepens and add one with this feature.

Read more comments on GitHub >

github_iconTop Results From Across the Web

The problem is not with the ratio, but with init-max-area="true". ... As you can see, the uploaded image can't take all the space...
Read more >
Make uploaded images fit the same dimensions within a card
Use aspect-ratio on the image like in the snippet below. body { font: 16px sans-serif; margin: 0 } .cards { display: flex; gap:...
Read more >
Card Design Studio Service Questions
Why isn't my card available for customization? ... Can I preview or store my uploaded images online? ... How long will it take...
Read more >
Customise a card - Card Interface - GitHub Pages
Image. A visual intended to help students connect/associate conceptually and emotionally with the item the card represents. Rather than an image this can...
Read more >
Picture Perfect
With Picture Perfect, you can upload your favorite photos of family, ... And, best of all, it's free for America First members. ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found