如何垂直拉伸图像？

Question

我正在尝试使用背景图片实现辅助菜单，但我不知道如何使其在垂直方向上也能响应... 我有这张图片https://ibb.co/Pzyyyh2，尺寸为 320x1000px 。这是一个非常高的白色图像，某个点变为黑色。 我想让这个黑色细节始终保持在我的菜单的某个点上（从白色到黑色的过渡应该在社交链接部分之前开始）。

如您在此处看到的那样，在 iPhone X 模拟器上，它可以按预期运行：https://ibb.co/C7Nm6b7。 在诸如 Moto G4 之类的其他设备上，发生这种情况：https://ibb.co/S7tQwJV

Answer 1

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

如果要使用偏斜，请先创建一个div（父/包装），然后将其放在页脚区域的正前方。然后在包装器内，添加skew-div。使父对象具有溢出功能：隐藏，这样，超出父对象边界的歪斜siv不会变得可见。

赞：

然后，在“ magic-div”中，您将具有以下内容：

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