Ui cropper crop height and width

Question

I am using angualarjs. I want to crop image so i used ui-cropper library.

Followed:

https://codepen.io/Crackeraki/pen/zvWqJM

here is my code:

<div>Select an image file: <input type="file" id="fileInput" /></div>
    <div class="cropArea">
      <ui-cropper image="myImage" area-type="rectangle" aspect-ratio="1.7" result-image="myCroppedImage" result-image-size='{w: 340,h: 200}' init-max-area="true"></ui-cropper>
    </div>

    <div>Cropped Image:</div>
    <div><img ng-src="{{myCroppedImage}}" /></div>

I want show default cropping area of width(crop-width) to be 100% and height(crop-height) to be 100px.

here i am using some aspect ratio 1.7. But i want the crop area width to be 100% for any image.

I need like this:

But, its coming like below :(

Please suggest me how can i achieve that.

Answer 1

Select an image file:

 <div class="cropArea"> <ui-cropper image="myImage" area-type="rectangle" aspect-ratio="0" result-image="myCroppedImage" result-image-size='{w: 340,h: 200}' init-max-area="true"></ui-cropper> </div> <div>Cropped Image:</div> <div><img ng-src="{{myCroppedImage}}" /></div> 

You need to change aspect-ratio="1.7" to aspect-ratio="0" then it will take default selected region to that particular image.