Estoy tratando de hacer un lienzo con un fondo de imagen que llene toda la pantalla sin estirar la imagen de fondo. Para hacer esto, pensé que el mejor método sería comenzar con un elemento img normal con 'ajuste de objeto' para que llene la pantalla sin estirarse, luego podría aplicar el mismo ancho/alto del elemento img a un lienzo elemento y hacer que el elemento lienzo reemplace el img. Esto también ayuda a que la página se cargue más rápido, ya que no tengo que esperar a que se cargue la imagen después de que se haya cargado la página, ya que la imagen se carga mientras se carga la página. Sin embargo, aunque el ajuste de objetos funciona como se esperaba para los elementos que no son img, parece que para los elementos img escala el contenido del elemento en lugar del elemento en sí, lo que significa que cuando trato de obtener las dimensiones de la imagen, solo obtengo el dimensiones de toda la ventana. He mostrado esto en el siguiente código; si abre el elemento de inspección, puede ver que el elemento img se extiende por toda la pantalla.

 * { overflow: hidden; margin: 0; padding: 0; } div { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } img { width: 100%; height: 100%; object-fit: contain; }

 <div> <img src="https://via.placeholder.com/150"> </div>