Creo algunos botones, con imágenes de un sprite para usar como fondo para ellos. Cada botón está contenido dentro de su propio <figure> . Cuando se selecciona el botón, se debe mostrar la imagen de tamaño completo del Sprite. Las imágenes de tamaño completo se muestran correctamente, pero las imágenes en miniatura de los botones no están en las posiciones correctas.

Parte de la miniatura azul aparece con la miniatura de forma roja.
El resto de la miniatura de la forma azul aparece donde debería estar la miniatura azul completa, y la miniatura verde se coloca sobre ella.
No aparece nada donde debería estar la miniatura de la forma verde.

Esto es lo que se muestra. ingrese la descripción de la imagen aquí

Aquí está la parte relevante de mi código. ¿Qué estoy haciendo mal?

el css

 #img1, #img2, #img3, #thumb1, #thumb2, #thumb3 { background: url("colours-full.jpeg"); background-repeat: no-repeat; object-fit: none; } #thumb1, #thumb2, #thumb3 { width: 30em; height: 30em; background-size: cover; float: left; margin-right: 1.5em; } #img1 {object-position: 0 0; width: 422px; height: 287px; } #thumb1 { background-position: 0 0; } #img2 {object-position: -422px 0; width: 374px; height: 374px; } #thumb2 { background-position: -30em 0; } #img3 {object-position: -796px 0; width: 151px; height: 560px; } #thumb3 { background-position: -60em 0; }

La creación del botón

 function imgBtn (figNum) { // Insert a button with thumbnail image let html = '<button type="button" ' + 'id="thumb' + figNum + '" onclick="showBigImg (' + figNum + ')"></button>'; const figcap = document.getElementById("fig" + figNum).firstElementChild; figcap.insertAdjacentHTML ("afterend", html); /* Append the button to the figcaption */ }