Ha pasado un tiempo, así que volver a aprender muchas cosas de html. Tengo una imagen receptiva que quiero cambiar aleatoriamente cada vez que se visita la página. Lo tengo funcionando bien, excepto que la imagen se muestra en su tamaño real/original, no en el tamaño reducido que debería ser, dictado por el tamaño de la ventana del navegador.

el html:

 <div class="background"> <div id="imgspan"> </div>

 javascript: window.onload = function() { myHeaderFunction();

};

 function myHeaderFunction() { var myImageList = ["header01.jpg", "header02.jpg", "header03.jpg", "header04.jpg"]; var item = myImageList[Math.floor(Math.random() * myImageList.length)]; var myPath = "imagesHeader/" + item; document.getElementById("imgspan").style.background = "url('" + myPath + "') center center no-repeat"; console.log(myPath); setSize();

}

 function setSize() { let yourImg = document.getElementById("imgspan"); let imgWidth = yourImg.clientWidth; document.getElementById("imgspan").width = imgWidth; document.getElementById("imgspan").height = "auto";

}

 css: .background #imgspan { position: relative; top: 0; text-align: center; max-width: 100%; height: auto; display: block; text-shadow: none; color: transparent; background-size: 100%; background-position: 50% 50%; background-repeat: no-repeat; opacity: 1.0; -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein 1s; /* Firefox < 16 */ -ms-animation: fadein 1s; /* Internet Explorer */ -o-animation: fadein 1s; /* Opera < 12.1 */ animation: fadein 1s;

}

 .background #imgspan { /* height/width of image */ padding-top: 41%; display: block; max-width: 100%; height: auto;

}

 #imgspan { background: url("../imagesHeader/header01.jpg");

}

Supongo que esto es algo muy simple que me estoy perdiendo.