Html 如何响应地垂直拉伸图像？

我正试图实现一个带有背景图像的侧菜单，但我不知道如何使它也垂直响应。。。 我有这个图像，它的大小是320x1000px。这是一个非常高的白色图像，某个点变成黑色。 我想让这个黑色细节始终停留在我的侧菜单的某个点上（从白色到黑色的过渡应该在社交链接部分之前开始）

正如您在这里看到的，在iPhone Xemulator上，它按预期工作：。

---

而在另一台设备上，如Moto G4，则会发生这种情况：

您不需要图像的白色部分，如果您试图显示的是黑色，则只需使用黑色即可。如果您的图像是svg，它将始终正确展开/收缩，而不会出现可见的像素化。页脚的其余部分的背景色应与img相同

如果您想使用skew，那么创建第一个div（父/包装器），然后将其放在页脚区域的正前方。然后在包装器内部，添加skew-div。使父对象具有overflow:hidden，这样过了父对象的边界，skew-siv的多余部分就不可见了

像这样：

然后，在您的“魔法分区”中，您将拥有以下内容：

---

父级获得宽度：100%；和溢出：隐藏；。子歪斜div内得宽度：100%；也如果按照前面的建议将背景与svg一起使用，则背景大小规则应为100%自动或覆盖，具体取决于场景（覆盖的宽度+倾斜角度）。尝试一下，让我们知道它是如何进行的。

为什么要使用图像来完成此任务<黑色div上的code>skew（）会有所帮助too@Ifaruki哇，谢谢，我根本不知道skew（）的存在！所以基本上它允许我在不使用图像的情况下创建倾斜效果，从而自动响应，不是吗？我应该在社交链接菜单上使用它，对吗？是的，它更好，你的页面应该是fster，因为它没有下载整个图片。我会用一个黑色的div，

skew（）

him，给他一个绝对位置，然后把他放在bottom@Ifaruki我正在实施它，它似乎比你说的要好得多！还有一件事，因为skew div是倾斜的，所以它自然会溢出。我需要避免这种行为，但是添加

overflow-y:hidden

没有帮助……你有什么线索吗？例如：在父对象上使用“隐藏溢出”并将“倾斜”元素与translateY一起向下移动