No puedo cambiar el tamaño de la imagen. Aquí está mi código
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>Lo que quiero es que cuando pegue la URL, la imagen se mostrará en 2 divs diferentes y cambiará de tamaño automáticamente. Sin embargo, necesito dos tamaños diferentes de la imagen. El tamaño del primer div sería el número 1 y el segundo div sería el número 2. No sé cómo poner este tamaño en el código javascript.
¿Cómo puedo hacer eso?
Puede agregar valores para ancho y alto usando javascript como este:
'<img src="'+ document.getElementById('imglink').value +'" width="400" height="400" fit="crop"/>'Pruebe el fragmento a continuación:
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>