css - 调整图像大小并显示在同一位置

Question

我在我的网站标题中添加了一个类似 facebook 的按钮。我希望它根据屏幕尺寸自动调整大小(这似乎可行)。但是，当我调整屏幕大小时，位置会发生变化。如何确保位置也固定？

这是我的代码。如果我更改 position 属性，似乎什么都不起作用了。我试过调整 top 属性，但这也没什么用。

.header-img-1 {
  left: 45%;
  width: 8%;
  height: auto;
  position: absolute;
  top: 72%;
}

网站:http://www.gelnagels-gina.be

Answer 1

如果您希望位置取决于屏幕尺寸，则必须在屏幕尺寸中定义左侧、宽度和顶部。 vh 和 vw 在大多数情况下都得到浏览器的广泛支持。我不能告诉你你应该使用的确切数字是多少，因为你现在将根据屏幕尺寸定义，而不是它包含在其中的框。它应该看起来像这样，除了将 10 替换为正确的数。

.header-img-1 {
  left: 10vw;
  width: 10vw;
  height: auto;
  position: absolute;
  top: 10vh;
}

如果这不能给你一致的行为，你可能需要定义一些最小宽度和其他类型的规则来使它工作，这取决于你的具体情况，或者可能使用 javascript 来使用数学来使这成为可能并且/或更容易。祝你好运。