合并两个图像并在单击时更改其中一个

Question

我必须如图所示（在此消息下方）组合两个图像。绿色图像必须在另一幅图像的红线上，问题是，一旦响应调整图像1的大小，通过减小窗口，绿色图像就会移动，而不再与另一幅图像保持胶合。 我保留了执行此操作的方法（HTML，CSS或jQuery），这两个图像必须在响应时表现得好像它们是一个。另外，当我单击小图像时，必须使用相同大小但不同的另一幅图像进行更改。 感谢所有将为我提供帮助的人。

Answer 1

请参见下面的代码片段（也发现here-在SO上显示效果不佳，因为您无法调整输出窗口的大小）。我尚不清楚您要做什么，但我认为这可以达成目标。如果没有，请告诉我，我将修改答案。

// This position is relative to the original size of the first image.
// i.e. when the window is exactly as large as image 1, image 2 will
// be displayed at (100, 200)
var pos = [100, 200];

// Reposition img2 as the window is resized
function reposition () {
  img2.style.left = (pos[0] / img1.naturalWidth * img1.clientWidth) + "px";
  img2.style.top = (pos[1] / img1.naturalHeight * img1.clientHeight) + "px";
  // The position is re-calculated based on the scaling of image 1
  // (its current width / its original width)
  // This is multiplied by pos to ensure that image 2 is always in the
  // same position proportional to the size of image 1
}

// Run reposition on window changes
window.onresize = function () {
  reposition();
}
window.onload = function () {
  reposition();
}

// Change the image on click
img2.onclick = function () {
  img2.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Unterf%C3%BChrung_B22_M%C3%BCnchner_Ring_3150017.jpg/320px-Unterf%C3%BChrung_B22_M%C3%BCnchner_Ring_3150017.jpg"
}

/* Image 1 will fill the window */
#img1 {
  width: 50vw;
}

/* Image 2 has absolute position, and is 1/5 the size of image 1 */
#img2 {
  position: absolute;
  width: 15vw;
  /* Obviously this sizing can be changed */
}

body {
    margin: 0;
}

/*
Because both images scale with the window, they will keep
 the same size proportional to each other. This could also be done in Javascript if needed.
*/

<!-- Example images -->
<img id="img1" src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_960_720.jpg" />
<img id="img2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Tunnel_Eierberge_Regional_Express_3300341.jpg/320px-Tunnel_Eierberge_Regional_Express_3300341.jpg" />