根据缩放背景图像定位和/或缩放div [英] Position and/or scale divs according to scaling background image

问题描述

我有一个根据浏览器窗口的高度/宽度按比例缩放的背景图片。我需要在这个背景上放置div，这些div应该相对于背景图像定位。这些div中的一些也应根据背景图像缩放。最重要的是，这些div应该总是保持他们的位置相对于背景图像。

I have a background image that is scaling proportionally according to the height/width of the browser window. I need to place divs on this background, these divs should be positioned relative to the background image. Some of these divs should also scale according to the background image. The most important thing though, these divs should always keep their position in relation to the background image.

这有点令人毛骨悚然，这是甚至可能吗？任何想法或提示都非常感谢。谢谢！

A bit stumped with this, is this even possible? Any ideas or hints are greatly appreciated. Thanks!

更新：
这是一个URL，说明我想要达到的目标： http://production.bilbao.fi/bg_test/
粉红色框应始终保持相同的坐标（相对于背景图片），无论如何大背景/视口是

UPDATE: Here is a URL illustrating what I'm trying to achieve: http://production.bilbao.fi/bg_test/ The pink box should always maintain the same coordinates (in relation to the background image) no matter how big the background/viewport is.

推荐答案

这是什么意思？

我不知道你将如何工作它的Supersize插件，因为它裁剪图像，以保持它的比例，我不知道可能发生什么热点得到切出 - 在我的示例中，我不使用脚本只是图像缩放到视口，这使它失真，但我不能想到一个方法来缩放框，而不是相对于视口百分比

I'm not sure how you would work it with the Supersize plugin as it crops the image to keep it in proportion, and I wonder what might happen to "hotspots" that get cut out - In my example I'm not using script just have the image scaling to the viewport, which distorts it, but I can't think of a way to get the box to scale without being relative to the viewport percentage

只是回答，有一个想法，看看一般的想法是创建可扩展的热点吗？

just answering, with an idea and to see if the general idea is to create scalable hotspots?

这篇关于根据缩放背景图像定位和/或缩放div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！