you shouldn’t have to resize or crop your image. just set the width to say 50vw
img{
width:50vw;}<img src='https://via.placeholder.com/2000'>Solution 1 :
Solution 2 :
Use the meta viewport tag in the head, then use a little smaller size for the image:
Html:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
Css:
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
Comments
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.