JavaScript: il modo più semplice per ottenere immagini a dimensioni piene

Il modo più semplice per ottenere immagini a dimensioni piene in JavaScript è quello di usare le immagini di sfondo.

Partiamo dalla seguente marcatura:

<div id="wrapper">
	<img src="https://sito.tld/images/image.jpg" id="image" 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() {
  const setBackground = element => {
	const img = element.querySelector( "img:first-child" ),
	src = img.src;
	element.style.backgroundImage = "url(" + src + ")";	
  };
  
  document.addEventListener( "DOMContentLoaded", () => {
      var wrapper = document.querySelector( "#wrapper" );
      setBackground( wrapper );
  });
})();