Solution 1 :

you shouldn’t have to resize or crop your image. just set the width to say 50vw

<img src=''>

Solution 2 :

Use the meta viewport tag in the head, then use a little smaller size for the image:


 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>


  img {
  width: 800px;
  height: 800px;

Problem :

Originally the image size is 2000 * 2000. However, it does not fit my window screen. Only the top left of the image can be seen. So I resulted to resizing the image through canvas. How can I set its new dimensions as the image size before I crop it? Jcrop still displays the original image size


Comment posted by Messy Maze

But i still need to crop it. The function is to resized the image or compress it to 1024 * 1024 instead of 2000*2000, then crop a specific area from that resized image.