Tema: ajustar el ancho y alto de una imagen
Ver Mensaje Individual
  #8 (permalink)  
Antiguo 27/08/2018, 08:48
azaz
 
Fecha de Ingreso: enero-2011
Mensajes: 1.150
Antigüedad: 14 años
Puntos: 10
Respuesta: ajustar el ancho y alto de una imagen
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
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>Documento sin título</title>
  5. <style>
  6. body{
  7.     margin:0;
  8. }
  9. img{
  10.     vertical-align:middle;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <script>
  16. window.addEventListener('load',sizeImage,false);
  17. function sizeImage(src){
  18.     var ancho_pantalla=window.innerWidth,
  19.              alto_pantalla=window.innerHeight,
  20.          img=document.getElementById("imagen"); 
  21.         if(ancho_pantalla<alto_pantalla){
  22.             img.setAttribute('width',ancho_pantalla);
  23.             img.setAttribute('height','auto');
  24.         }else{
  25.             img.setAttribute('width','auto');
  26.             img.setAttribute('height',alto_pantalla);   
  27.         }
  28.                 img.img.setAttribute('src',src);    
  29. }
  30. </script>
  31. <img id='imagen'>
  32. </body>
  33. </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.