在 HTML/CSS/JS 中拼接图片答案

【问题标题】：Stitching Together a Picture in HTML/CSS/JS在 HTML/CSS/JS 中拼接图片
【发布时间】：2016-05-23 08:22:48
【问题描述】：

我正在开发一个网络应用程序，作为其中的一部分，我需要能够操作图片的各个部分，特别是小号上的按键。我从 Photoshop 中雕刻出每一块，但我不知道如何以响应方式将每个键与小号对齐：我可以使用绝对定位来定位键，但是当小号元素调整大小时，键不再对齐。有什么建议吗？

【问题讨论】：

【解决方案1】：

将喇叭图像设置为百分比宽度，并使用具有min-width 和max-width 属性的容器 div 将它们包裹起来，以便它们缩小和增长，并相应地调整内容。

【讨论】：

问题不在于元素没有缩小或增长，而是它们没有精确对齐它们应该在喇叭上的位置，所以它们看起来移位了
@AustinSerio 不看代码我们真的不能说太多。你有没有机会在图片上使用display: inline-block？
不，我不是。这是代码： position: absolute;左：54.3%；宽度：3%；顶部：50px；问题在于，随着喇叭图像的缩小，键需要对齐的点会随着图像的缩小而有效地移动，而键则保持在同一位置。也许有更好的方法来做到这一点？我想过可能会使用一张桌子。
请用整个代码更新您的问题，包括您现在拥有的 html 标记。一个小提琴将是理想的。
这是网址，如果可以的话？否则我会做小提琴donaldtrumpet.austinserio.com（这是一个噱头网络应用程序，绝对不支持他）