ajustar el ancho y alto de una imagen

azaz · #1 (**permalink**) 20/08/2018, 11:03

Necestito ajustar el ancho y alto de una imagen, antes de que carge el documento, es decir que la imagen se carge con las medidas correctas.

Código HTML:

Ver original<html>
<body>
<img src='miImagen.jpg'>
</body>
</html>

esto es un ejemplo simple, lo que no quiero es hacerlo después del load, es posible cambiarlo sin esperar que cargue el documento.
saludos

tuadmin · #2 (**permalink**) 20/08/2018, 14:58

para tu cometido, necesitas usar JAVASCRIPT, o usar medidas por Porcentaje

azaz · #3 (**permalink**) 20/08/2018, 16:47

Cita:

Iniciado por tuadmin

para tu cometido, necesitas usar JAVASCRIPT, o usar medidas por Porcentaje

quiero hacerlo con javascript, sin porcentajes, el problema es que quiero darle el ancho y alto a la imagen antes de que cargue el documento.

como se podría hacer, me pueden poner un ejemplo, gracias.

ArturoGallegos · #4 (**permalink**) 20/08/2018, 17:33

Por un lado con javascript no puedes modificar el elemento si aun no termina de cargar el documento, javascript siempre se ejecuta después de cargar el documento y en el caso de las imágenes debe haberse cargado la imagen previamente para poder trabajar sobre ella.

en segundo lugar, debes investigar por tu cuenta y documentarte, evento onload y funciones getElementByID y querySelector

Mucha suerte, regresa y pregunta por tus dudas después de haber creado algo de código que demuestre que estas intentándolo.

azaz · #5 (**permalink**) 21/08/2018, 03:20

Cita:

Iniciado por ArturoGallegos

Por un lado con javascript no puedes modificar el elemento si aun no termina de cargar el documento, javascript siempre se ejecuta después de cargar el documento y en el caso de las imágenes debe haberse cargado la imagen previamente para poder trabajar sobre ella.

en segundo lugar, debes investigar por tu cuenta y documentarte, evento onload y funciones getElementByID y querySelector

Mucha suerte, regresa y pregunta por tus dudas después de haber creado algo de código que demuestre que estas intentándolo.

Hola, actualmente lo que estaba usando era el evento onload, pero de esta manera lo que pasa es que carga la imagen y posteriormente se ejecuta el javascript y transforma la imagen como quiero.

El problema es que al cargar la imagen se ve muy grande y hay que hacer scroll hasta que se ejecuta el javascript.

Se entiende mi problema, existe alguna otra manera de poder hacerlo.

Alexis88 · #6 (**permalink**) 21/08/2018, 07:13

Cita:

Iniciado por azaz

Hola, actualmente lo que estaba usando era el evento onload, pero de esta manera lo que pasa es que carga la imagen y posteriormente se ejecuta el javascript y transforma la imagen como quiero.

El problema es que al cargar la imagen se ve muy grande y hay que hacer scroll hasta que se ejecuta el javascript.

Se entiende mi problema, existe alguna otra manera de poder hacerlo.

Por esa descripción, parece que la imagen se tardara mucho en cargar. Y lo digo porque mencionas que se llega a tener el tiempo necesario como para desplazarse hacia abajo hasta que haya terminado de cargar y se ejecuta el script. Si fuera así, lo idea es que reduzcas el peso de los archivos de imagen que usas. Por otro lado, también te vendría bien trabajar con CSS ya que esto es más un tema de diseño que, si bien se puede llevar con JavaScript, con CSS puede llegar a ser más eficiente.

ArturoGallegos · #7 (**permalink**) 21/08/2018, 08:46

Con cuerdo con Alexis lo que te falta es optimizar la imagen, según recuerdo y quiero pensar que estas aquí despues de pasar por
http://www.forosdelweb.com/f53/ajust...-body-1162001/

Dado que tu imagen pesa tanto debes empezar a revisarla y considerar, ya que por lo general una imagen no pasa de los 350 kb
1.- que dimensiones tiene? para la web una imagen de 1920x1920 creo que seria el máximo aprovechable, mas grande realmente en el monitor no verías diferencia, aun son poco comunes los monitores que te dan una mayor resolución.
2.- formato del archivo, recuerda usar el formato correcto, he visto quienes usan png a diestra y siniestra cuando un jpg es mas optimo para el caso.
3.- checa los DPI o PPP de tu imagen, con 72 son suficientes para la web.

Dudas, que propósito tiene esta imagen? es una imagen que varia según el escenario o una imagen que siempre sera la misma en todos los escenarios?

azaz · #8 (**permalink**) 27/08/2018, 08:48

Hola, la imagen que se cargan no son pesadas pero el problema es que las medidas cambian y se complica la cosa para poder ajustarla a la pantalla en proporcion, pongo codigo de lo que tengo por si me quereis ayudar.

Código HTML:

Ver original<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style>
body{
    margin:0;
}
img{
    vertical-align:middle;
}
</style>
</head>
<body>
<script>
window.addEventListener('load',sizeImage,false);
function sizeImage(src){
    var ancho_pantalla=window.innerWidth,
             alto_pantalla=window.innerHeight,
         img=document.getElementById("imagen"); 
        if(ancho_pantalla<alto_pantalla){
            img.setAttribute('width',ancho_pantalla);
            img.setAttribute('height','auto');
        }else{
            img.setAttribute('width','auto');
            img.setAttribute('height',alto_pantalla);   
        }
                img.img.setAttribute('src',src);    
}
</script>
<img id='imagen'>
</body>
</html>

como dije arriba tengo las proporciones de la imagen que tengo que cargar ya que estas imagen tienen diferentes medidas, pero no se como ajustarla a la pantalla sin perder proporcion ni tener que hacer scroll.

Alexis88 · #9 (**permalink**) 27/08/2018, 13:14

Si lo que buscas es adaptabilidad, deberías optar por usar media queries.

azaz · #10 (**permalink**) 27/08/2018, 13:33

Cita:

Iniciado por Alexis88

Si lo que buscas es adaptabilidad, deberías optar por usar media queries.

quedria hacer algo igual que si abres una imagen con un navegador, que al reducir se adapta al dispositivo, creo que solo con media queries no se puede.

Alexis88 · #11 (**permalink**) 27/08/2018, 19:15

Con las media queries puedes adaptar las dimensiones de cualquier elemento según las dimensiones del dispositivo. Y es más eficiente que hacerlo con JavaScript.

azaz · #12 (**permalink**) 28/08/2018, 00:58

para simular que se abre la imagen igual que en un navegador, tendría que crear muchas medidas con las medias queries , a eso me refiero. teniendo en cuenta que también la imagen puede tener medidas diferentes.
Saludos

Alexis88 · #13 (**permalink**) 28/08/2018, 16:43

Puedes trabajar de acuerdo con márgenes o bien puedes crear reglas para cada mínimo cambio en la resolución, lo cual sería nada práctico dado a que se trata de un caso muy poco frecuente. Lo usual es trabajar con márgenes determinados, de tal modo que la imagen se irá ajustando a las dimensiones especificadas. Usar porcentajes es útil en casos así.