嗨Webflow社区,
在我的编辑器上，我设法将图像(子)与背景(父)对齐。
基本上，我的最终目标是使插图(红色)完全对齐在我的背景线的顶部。
然而，我在Webflow上的预览是这样的
我发布的网站是这样的
它们偏离了一些像素，并没有与我的背景线对齐。
下面是我从上到下的设置:
剖面(位置:固定，100%宽，100%高)
Div(位置:相对，100%宽，100%高)
在Div中，我有2张图片(位置:绝对，大小和位置设置为特定的%)
我如何让它精确地定位在编辑器、预览和所有屏幕的“像素”上?
附注:我还尝试将所有的%值转换为vh和vw，所以它就在上面，但也得到了相同的问题。
提前感谢您的帮助!
这是我的网站只读:链接
@Eugene_Tan
选择的设计本质上是具有挑战性的，以响应的方式构建。我的建议是在illustrator中创建橙色元素，将其保存为SVG或PNG格式，并在父div中上传单个元素。
然后，你只需要控制一个图像，而不是两个。
2喜欢
Keithen(韦伯Keithen)
# 3
我无法在浏览器上为您测试这个。然而，在只读模式下，我创建了一个新的Div，专门容纳了两个图像，然后将其更改为:
显示:Flexbox;方向:垂直的;对齐:中心;证明:中心;
50图像:margin-right: 1 px;
52形象:margin-left: 1 px;
这一切似乎都奏效了。
1像
嘿@Eugene_Tan我支持凯文，但我也注意到你试图把两个部分分开动画。
在不同的地方有大量的样式设置——图像本身的宽度和高度设置，然后是图像类，然后是图像div包装器，然后是完整的图像伸缩包装器。此外，“所有图像”有样式超出默认值(不推荐，因为你必须纠正每个图像)。
所以我从头开始，使用CSS网格(因为我喜欢网格):
- 删除重复的“Div Block 22”。我改名为“图形布局”。设置为网格(0px间隙，对齐:居中);宽度和高度为100%。这是所有。
- 添加背景图像(此处命名为“bg”)，设置为手动位置，覆盖整个网格。设置宽度和高度为100%，object-fit: none(这很重要，因为它不会随着视口缩放背景)。
- 使用左边的图像包装器(这里是“g-L”)，在网格中手动定位，右对齐。显示:弯曲，对齐:顶部。Margin-right: 1 px。高度:720px(使用编辑器控件)不图像控件-这可以是你想要的任何值，出于习惯我选择720)。
- 取右边的图像包装器(这里是“g-R”)，在网格中手动定位，左对齐。显示:弯曲，对齐:顶部。Margin-left: 1 px。高度:720px(或者你用在左边的任何地方)。
- 删除所有从左右图像本身的样式，包括“所有图像”。它们应该是最大宽度:100%，显示:内联块，没有框阴影。普通的图像。
这是一个快速的屏幕记录。
希望这可以帮助!
科林
2喜欢
嘿@Kevin_Mooney，非常感谢您的回复。这可能有用，但我想让它们朝相反的方向打开。
@Eugene_Tan
当然，我完全理解。你可能需要遵循以下步骤@ColinSimmons．
另一个需要考虑的是在视频中进行动画，将视频插入到背景的顶部。我想我在这些例子中的观点是，让设计更简单和/或更容易实现。
响应式可以是诅咒我宁愿不惜一切代价避免它。
2喜欢
非常感谢@ColinSimmons为详细的解释，甚至屏幕记录!!我在日常工作中使用网格太多了，但在Webflow中从未使用过。再次感谢你的帮助。这当然是有效的，并且可能是我能够执行它的最佳方式。
1像
@Kevin_Mooney我同意。谢谢你的建议。我会记住的，是的，响应是一个cass。
1像
嘿@ColinSimmons如果你不介意我再来打扰你的话。我想知道是否有一种方法不设置bg对象适合为“none”，因为这样它将只是一个固定大小的bg，不能真正迎合更大的屏幕。我认为我真正需要的是扩大bg，以适应整个大众和vh，仍然有g-L和g-R相应对齐。
