当背景大小覆盖时,如何获得当前的"真实"背景图像大小?

时间:2017-08-15 08:02:55

标签: javascript html css

之前可能会问过这个问题,我尝试了这个帖子中给出的答案:How to get dimensions for a background image when background-size is set to contain?

但在这种情况下,background-size设置为cover,而不是contain

背景尺寸原来为1920x1080。我有一个div元素,它基本上总是将其宽度和高度缩放到100%,同时背景图像,如果所述div设置为覆盖。

1920/1080给出了大约1.7的比率,因此每当浏览器的窗口缩放时,div的宽度/高度比率大于或低于1.7。不是正确的比例 - 事情破裂。因此,我需要一种方法来计算背景图像的大小,以便正确设置。

编辑:以下是情况的示例jsfiddle:https://jsfiddle.net/ahvonenj/35pbovmz/

如果调整结果区域的大小,可以看到结果区域本身有一些宽度和高度,比如400x600。但是,这400宽度和600高度对于我的计算是不正确的。我需要知道背景图像的大小。注意背景如何通过基本上保留一些图像来保持其比率。

结果区域宽度和高度仅在结果区域宽度/高度恰好是背景图像的比率时才是正确的,在这种情况下约为1.7。

编辑2:现在几乎正常运作:https://jsfiddle.net/ahvonenj/35pbovmz/

2 个答案:

答案 0 :(得分:1)

我自己找到了解决方案。这是一个很好的jsfiddle可视化,我们分别计算容器大小和实际背景图像大小。

您可以通过从右下角拖动来调整图像容器(红色边框)的大小,并查看容器大小如何与实际背景大小分开更改:https://jsfiddle.net/ahvonenj/o76k5jbx/

$(document).ready(function()
{
    var fullhdWidth = 1920;
    var fullhdHeight = 1080;
    var fullhdRatio = fullhdWidth / fullhdHeight; // About 1.7

    $('#wrapper').resize(function()
    {
        var containerWidth = $(this).width();
        var containerHeight = $(this).height();
        var containerRatio = containerWidth / containerHeight;
        var realWidth = null;
        var realHeight = null;

        console.log(containerWidth, containerHeight, containerRatio);

        if(containerRatio > fullhdRatio)
        {
            realWidth = containerWidth;
            realHeight = containerWidth/fullhdRatio;
        }
        else
        {
            realWidth = containerHeight*fullhdRatio;
            realHeight = containerHeight;
        }   
    });
});

注意:我正在使用this小库来检测容器div元素的大小更改,因为jQuery的resize处理程序只能绑定到window对象。

答案 1 :(得分:0)

我正在解决一个非常具体的问题。我有一个带有 background-size: cover 的背景图像,并在另一个带有剪切蒙版的元素上应用了 filter: invert() 效果。

一切都是响应式的,我需要保持 .centered 元素上背景的位置和大小与主背景同步。

enter image description here

html {
  background: #000 url(bg.jpg) no-repeat center center fixed;
  background-size: cover;

  overflow: hidden;

  --w: 1920; // this is the size of my background
  --h: 1080;
}

.centered {
  background-image: url(bg.jpg);
  background-position: center center;
  background-size: calc(max(calc(100vh / var(--h)), calc(100vw / var(--w))) * var(--w));
  background-repeat: no-repeat;

  background-clip: text;
  color: transparent;
  filter: invert(100%)
}

基本上,这是做什么

max(calc(100vh / var(--h)), calc(100vw / var(--w)))

是它计算cover图像在其原始尺寸之上的尺寸比例:

calc(100vh / var(--h)) 计算视口高多少(例如 0.8)
calc(100vw / var(--w)) 计算视口宽了多少(例如 1.2)

然后,无论这些值中的哪个较大,这就是图像必须大多少才能覆盖整个视口。

之后,您只需将 ratio 乘以 width 即可获得当前的“真实”大小。您还可以通过将其与 height 相乘来获得“真实的”ratio