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.
How can I do that?
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>