Lo primero que debemos tener claro es que este metodo de redimensionar una imagen con javascript modificará sus propiedades temporales y no el archivo de la imagen, sin embargo puede resultarnos muy ítil para dar efectos,mostrar como quedaría una imagen antes de redimensionarla etc.
Utilizando el DOM (Document Objet Model)
Le damos un id a nuestra imagen por ejemplo ima.
<img src="rutalaimagen" id="ima" />
Con document.getElementById(‘ima’) accedermos nuestro elemento imagen.
Para saber las medidas de la imagen:
alturaIma=document.getElementById('ima').offsetHeight;
anchuraIma=document.getElementById('ima').offsetWidth;
Nos devuelve la altura y la anchura en numero de pixeles respectivamente.
Para asignar un tamaño
document.getElementById("ima").style.height=numero+"px";
document.getElementById("ima").style.width=numero+"px";
Tenemos que añadir a la variable numero la cadena px, para que sepa que se lo damos en pixeles.
Proporción
Utilizando todo podemos crear imagenes proporcionales, y reducirlas o aumentarlas segun varie la variable numero.
alturaIma=document.getElementById('ima').offsetHeight;
anchuraIma=document.getElementById('ima').offsetWidth;
if(alturaIma>=anchuraIma){
proporcion=anchuraIma/alturaIma;
document.getElementById("ima").style.height= numero+"px";
document.getElementById("ima").style.width=(numero*proporcion)+"px";
}else{
//Mas ancho q largo
proporcion=alturaIma/anchuraIma;
document.getElementById("ima").style.width= numero+"px";
document.getElementById("ima").style.height=(numero*proporcion)+"px";
}
The ad is displayed on the page
current post: Redimensionado de imagenes en javascript, ID: 143
Ad: Anuncio2 (2573)
Placement: After Content 2 (after-content_2)
Display Conditions
Ad | wp_the_query | |
---|---|---|
term_id | 0 | |
taxonomy | 0 | |
is_main_query | 1 | 1 |
is_rest_api | 0 | |
page | 0 | 1 |
numpages | 0 | 1 |
is_archive | 1 | |
is_search | 1 | |
is_home | 1 | |
is_404 | 1 | |
is_attachment | 1 | |
is_singular | 1 | 1 |
is_front_page | 1 | |
is_feed | 1 |
Find solutions in the manual