Ajustar imagen al tamaño de la pantalla

edelegg · #1 (**permalink**) 16/03/2014, 08:28

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<html>
<head>
    <title></title>
</head>
<body>
<p><script type="text/javascript">
 
// Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use
 
var ultimateshow=new Array()
 
//ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]
 
ultimateshow[0]=['http://f.cl.ly/items/3F0T372I0l0E3i0U122F/skyblock.jpg', '', '']
ultimateshow[1]=['http://f.cl.ly/items/1M310C2a2l1Q251D1J0P/survival.jpg', '', '']
ultimateshow[2]=['http://f.cl.ly/items/2b1Z0y3y2B3q2q0F183J/bowwarfare.jpg', '', '']
ultimateshow[3]=['http://f.cl.ly/items/2Z3W1F1v1n1L1o3Y2H33/pvp.jpg', '', '']
ultimateshow[4]=['http://f.cl.ly/items/2K3n2P2A3D3S3r1y3v37/hg.jpg', '', '']
 
//configure the below 3 variables to set the dimension/background color of the slideshow
 
var slidewidth="100%" //set to width of LARGEST image in your slideshow
var slideheight="100%" //set to height of LARGEST iamge in your slideshow
var slidecycles="continous" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="no" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'
 
//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000
 
////Do not edit pass this line////////////////
 
var ie=document.all
var dom=document.getElementById
var curcycle=0
 
if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}
 
var currentslide=0
 
function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}
 
if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow
 
function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}
 
if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')
 
function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}
 
if (ie||dom)
window.onload=start_slider
 
</script></p>
</body>
</html>

Como podéis ver:

Código Javascript:

Ver originalvar slidewidth="100%" 
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.

JinSunMi · #2 (**permalink**) 16/03/2014, 11:55

Yo no tengo problemas para esto
pero es con CSS en diseño responsive