我一直试图通过使用倾斜和倾斜的CSS网格来创建等轴测错觉来构建这个等轴测UI：https://codepen.io/melvinidema/pen/wvPKxEb
然后，我想在瓷砖上添加一个精灵。例如，在该地点创建一所房子。然而，问题是对象也会发生偏斜：https://codepen.io/melvinidema/pen/PoOPByV
到目前为止，我试图通过撤销rotateZ()来解决这个问题。但这导致了一个看起来仍然很奇怪的图像。因此，我必须绝对定位图像，并手动设置高度、顶部和左侧。之后我得到了这个：https://codepen.io/melvinidema/pen/BamoPve
这正是我想要的。但这远非理想。因为一旦我尝试使用不同的房子，我就必须重做所有的试用&错误，使其正确定位和良好的外观。因此，当我尝试添加一个与前代图像具有不同维度的图像时：https://codepen.io/melvinidema/pen/RwjWBOq
我的问题是，我们如何解决这个问题？这样，无论我使用什么图像，它都是正确的。在不手动设置高度、顶部和左侧属性的情况下？
有人建议在网格之外渲染图像，而不仅仅是正确定位它们。但是我该怎么做呢？如何计算图像的位置？
提前感谢！
免责声明：使用常规光栅图像和图像标签可能有一个可行的解决方案。
一种选择是使用内联SVG(当使用Svelte、Vue等组件框架时，这种方法要干净得多，其中SVG可以位于与网格所在的模板分离的组件中(。
为什么？内联SVG具有独特的功能，可以将图像的一部分置于viewBox的边界之外，并使用overflow：在CSS中可见，它将显示出来。您已经对这个图像大小进行了特定的计算，使用SVG，您所有的图像大小都可以是相同的，等轴测足迹可以在各种瓦片上相同，并且图像可以"；"突出"；他们的框架。
SVG的CSS可以与Codepen示例中img标记的CSS几乎相同(添加了overflow：可见(。
您需要将preserveAspectRatio="none"添加到每个SVG文件中：
<svg preserveAspectRatio="none" ...><!-- path data here --></svg>
下面是一个多样式平铺的示例，这些平铺都具有相同的示意图和viewBox大小，有些平铺的内容溢出了框架的顶部https://codepen.io/JHeth/pen/zYPvmPQ