我一直在尝试通过使用倾斜和倾斜的 CSS 网格来构建这个等距 UI，以创建等距幻觉:https://codepen.io/melvinidema/pen/wvPKxEb
然后，我想在图 block 上添加一个 Sprite 。例如，在那个地方 build 一座房子。然而，问题是对象也会倾斜:https://codepen.io/melvinidema/pen/PoOPByV
到目前为止，我尝试通过撤消 rotateZ() 来解决此问题。但这会导致图像看起来仍然很奇怪。因此，我必须绝对定位图像并手动设置高度、顶部和左侧。之后我得到这个:https://codepen.io/melvinidema/pen/BamoPve
这就是我想要的。但这远非理想。因为一旦我尝试使用不同的房子，我就必须重做所有的试验和错误，以使其正确定位并且美观。所以这是当我尝试添加与前一个尺寸不同的图像时:https://codepen.io/melvinidema/pen/RwjWBOq
我的问题是，我们如何解决这个问题？这样无论我使用什么图像，它都是正确的。一直不用手动设置height、top、left属性？
有人建议在网格之外渲染图像，而不仅仅是正确定位它们。但我该怎么办呢？如何计算图像必须位于哪个位置？
提前致谢!
最佳答案
免责声明:可能存在使用常规光栅图像和图像标签的可行解决方案。
一种选择是使用内联 SVG(当使用 Svelte、Vue 等组件框架时，这种方法更加简洁，其中 SVG 可以位于与网格所在的模板分开的组件中)。
为什么？内联 SVG 具有独特的能力，可以将图像的一部分置于 viewBox 的边界之外，并使用 CSS 中的“overflow:visible”将其显示出来。您已经对此图像尺寸进行了具体的数学计算，并且使用 SVG，所有图像尺寸都可以相同，等距足迹在各种图 block 上可以相同，并且图像可以“突出”其框架。SVG 的 CSS 几乎与 Codepen 示例中的 img 标签的 CSS 相同(添加了“overflow:visible”)。
您需要将 preserveAspectRatio="none" 添加到每个 SVG 文件中:
<svg preserveAspectRatio="none" ...><!-- path data here --></svg>
以下是多种样式图 block 的示例，这些图 block 均具有相同的占用空间和 viewBox 大小，其中一些内容溢出了框架顶部 https://codepen.io/JHeth/pen/zYPvmPQ
关于javascript - CSS等距网格如何处理图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70913936/