Il modo più semplice per ottenere immagini a piena larghezza in JavaScript è quello di usare le immagini di sfondo.
Partiamo dalla seguente marcatura:
<div id="wrapper">
<img src="http://lorempixel.com/1024/600" id="image" width="1024" height="600" alt="" />
</div>
Nel codice CSS usiamo la proprietà background-size:
html, body {
margin: 0;
padding: 0;
}
#wrapper {
width: 100%;
height: 400px;
background-size: cover;
background-repeat: no-repeat;
backgroundd-position: 50% 50%;
}
#image {
display: none;
}
Quindi con JavaScript impostiamo l'immagine di sfondo:
(function() {
function setBackground( element ) {
var img = element.querySelector( "img:first-child" ),
src = img.src;
element.style.backgroundImage = "url(" + src + ")";
}
document.addEventListener( "DOMContentLoaded", function() {
var wrapper = document.querySelector( "#wrapper" );
setBackground( wrapper );
});
})();