Change Image Size with Its Resized Size Javascript

Question

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

Answer 1

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'>

Answer 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;
  }

Change Image Size with Its Resized Size Javascript

Question

2 answers

solution1
0 2021-01-16 04:43:36

solution2
0 2021-01-16 06:40:15

Change Image Size with Its Resized Size Javascript

Question

2 answers

solution1 0 2021-01-16 04:43:36

solution2 0 2021-01-16 06:40:15

solution1
0 2021-01-16 04:43:36

solution2
0 2021-01-16 06:40:15