使用 background-size: cover 计算背景集上特定部分的大小；

Question

我正在尝试构建混合应用程序，我需要获取背景特定部分的大小。

背景具有以下属性： background-size: 100% 100%; background: url('back.jpg') no-repeat center center fixed;
我想在该背景上放置一个 div，并将 div 的大小设置为背景的精确部分的大小。

这是一张图片来阐明我想做什么： Background example with a red rectangle on it

上面背景图片上的红色矩形是我想在响应式屏幕上计算尺寸的图片部分的示例。

由于这个主题，我知道如何使元素跟随背景上正确的绝对位置 Position element over background image，但不知道如何将它们调整到正确的比例。

有人能帮忙吗？

Answer 1

我终于解决了这个问题，并没有我想象的那么复杂。

首先要知道背景的宽高

第二个是知道我们想要在背景上的元素的大小（例如红色恐慌）

// In css : background-size: 100% 100%;
var background = {width: 1200, height: 900 };
var redScare = {selector: '.redScare', width: 400, height: 342, x: 50, y: 60};

var xFactor = $( window ).width() / background.width;
var yFactor = $( window ).height() / background.height;


// New width proportionally to the window size
redScare.width = redScare.width * xFactor;
// New height proportionally to the window size
redScare.height = redScare.height * yFactor; 

//Setting the new dimensions

$(redScare.selector).css('width', redScare.width);
$(redScare.selector).css('height', redScare.height);

使用 background-size: cover 计算背景集上特定部分的大小；

Calculate the size of a specific portion on a background set with background-size: cover;

html

javascript

css

jquery

responsive-images