Question

I have added a facebook like button to the header of my website. I want it to automatically resize depending on the screen size (this seems to work). When I resize my screen though, the position changes. How can I make sure the position is also fixed?

This is the code I have. If I change the position attribute nothing seems to work anymore. I have tried adjusting the top attribute, but that doesn't do much either.

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

Website: http://www.gelnagels-gina.be

Answer 1

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

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

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

Resize image and display on the same position

1 个答案: