Tema: Ajustar imagen al tamaño de la pantalla
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/03/2014, 08:28
edelegg
 
Fecha de Ingreso: marzo-2014
Mensajes: 1
Antigüedad: 10 años, 1 mes
Puntos: 0
Mensaje Ajustar imagen al tamaño de la pantalla
Hola, estoy intendo ver que estas 5 imágenes se ajusten en función al móvil que las quiera ver. Me refiero, si se ven desde un Galaxy S3 no es lo mismo que si se ven de un LG L5, digo por el tamaño de la pantalla.

¿Me puede ayudar alguien?


Código HTML: 
Ver original
  1. <html>
  2. <head>
  3.     <title></title>
  4. </head>
  5. <body>
  6. <p><script type="text/javascript">
  7.  
  8. // Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
  9. // For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
  10. // This notice must stay intact for use
  11.  
  12. var ultimateshow=new Array()
  13.  
  14. //ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]
  15.  
  16. ultimateshow[0]=['http://f.cl.ly/items/3F0T372I0l0E3i0U122F/skyblock.jpg', '', '']
  17. ultimateshow[1]=['http://f.cl.ly/items/1M310C2a2l1Q251D1J0P/survival.jpg', '', '']
  18. ultimateshow[2]=['http://f.cl.ly/items/2b1Z0y3y2B3q2q0F183J/bowwarfare.jpg', '', '']
  19. ultimateshow[3]=['http://f.cl.ly/items/2Z3W1F1v1n1L1o3Y2H33/pvp.jpg', '', '']
  20. ultimateshow[4]=['http://f.cl.ly/items/2K3n2P2A3D3S3r1y3v37/hg.jpg', '', '']
  21.  
  22. //configure the below 3 variables to set the dimension/background color of the slideshow
  23.  
  24. var slidewidth="100%" //set to width of LARGEST image in your slideshow
  25. var slideheight="100%" //set to height of LARGEST iamge in your slideshow
  26. var slidecycles="continous" //number of cycles before slideshow stops (ie: "2" or "continous")
  27. var randomorder="no" //randomize the order in which images are displayed? "yes" or "no"
  28. var preloadimages="yes" //preload images? "yes" or "no"
  29. var slidebgcolor='white'
  30.  
  31. //configure the below variable to determine the delay between image rotations (in miliseconds)
  32. var slidedelay=3000
  33.  
  34. ////Do not edit pass this line////////////////
  35.  
  36. var ie=document.all
  37. var dom=document.getElementById
  38. var curcycle=0
  39.  
  40. if (preloadimages=="yes"){
  41. for (i=0;i<ultimateshow.length;i++){
  42. var cacheimage=new Image()
  43. cacheimage.src=ultimateshow[i][0]
  44. }
  45. }
  46.  
  47. var currentslide=0
  48.  
  49. function randomize(targetarray){
  50. ultimateshowCopy=new Array()
  51. var the_one
  52. var z=0
  53. while (z<targetarray.length){
  54. the_one=Math.floor(Math.random()*targetarray.length)
  55. if (targetarray[the_one]!="_selected!"){
  56. ultimateshowCopy[z]=targetarray[the_one]
  57. targetarray[the_one]="_selected!"
  58. z++
  59. }
  60. }
  61. }
  62.  
  63. if (randomorder=="yes")
  64. randomize(ultimateshow)
  65. else
  66. ultimateshowCopy=ultimateshow
  67.  
  68. function rotateimages(){
  69. curcycle=(currentslide==0)? curcycle+1 : curcycle
  70. ultcontainer='<center>'
  71. if (ultimateshowCopy[currentslide][1]!="")
  72. ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
  73. ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
  74. if (ultimateshowCopy[currentslide][1]!="")
  75. ultcontainer+='</a>'
  76. ultcontainer+='</center>'
  77. if (ie||dom)
  78. crossrotateobj.innerHTML=ultcontainer
  79. if (currentslide==ultimateshow.length-1) currentslide=0
  80. else currentslide++
  81. if (curcycle==parseInt(slidecycles) && currentslide==0)
  82. return
  83. setTimeout("rotateimages()",slidedelay)
  84. }
  85.  
  86. if (ie||dom)
  87. document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
  88.  
  89. function start_slider(){
  90. crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
  91. rotateimages()
  92. }
  93.  
  94. if (ie||dom)
  95. window.onload=start_slider
  96.  
  97. </script></p>
  98. </body>
  99. </html>



Como podéis ver:
Código Javascript: 
Ver original
  1. var slidewidth="100%" 
  2. var slideheight="100%"

Está ajustado al 100% pero pruebo a meterme desde el móvil y no se ajusta al tamaño sino que sale cortada porque sale muy grande.

¿QUÉ TAMAÑO TENDRÍA QUE PONER?

GRACIAS, de antemano, Edel.
Última edición por pzin; 16/03/2014 a las 08:30 Razón: formato código