'Show two different size of image when url is pasted in the textbox

I'm unable to resize the image. Here's my code

document.getElementById('btn1').addEventListener('click', function(){
  document.getElementById('photo').innerHTML = '<img src="'+ document.getElementById('imglink').value +'"?width=400&height=400&fit=crop"/>';
});
<!DOCTYPE html>
<html>
<body>

<form action="#" method="post">
  <input type="url" name="imglink" id="imglink"  placeholder="Insert image URL here" /><br>
  <input type="button" value="Show Image" id="btn1" />
</form>
<div id="photo"></div>

</body>
</html>

What I want is when I pasted the url the image will be displayed on 2 different divs and will resize automatically. However, I need two different size of the image. First div size would be the number1 and the second div is number2. I don't know how to put this size on the javascript code.

  1. ?width=400&height=400&fit=crop
  2. ?width=800&height=450&fit=crop

How can I do that?

javascripthtml


Solution 1:[1]

You can add values for width and height using javascript like this:

'<img src="'+ document.getElementById('imglink').value +'" width="400" height="400" fit="crop"/>'

Try the snippet below:

document.getElementById('btn1').addEventListener('click', function(){
  // Image1
  document.getElementById('image1').innerHTML = '<img src="'+ document.getElementById('imglink').value +'" width="400" height="400" fit="crop"/>';
 // Image2
   document.getElementById('image2').innerHTML = '<img src="'+ document.getElementById('imglink').value +'"width="800" height="450" fit="crop"/>';
  
});
<!DOCTYPE html>
<html>
<body>

<form action="#" method="post">
  <input type="url" name="imglink" id="imglink"  placeholder="Insert image URL here" /><br>
  <input type="button" value="Show Image" id="btn1" />
</form>

<div id="image1"></div>
<div id="image2"></div>

</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Suraj Sanwal

Related Questions