css 从background-size检索计算值:cover/contain

lztngnrs  于 2023-01-22  发布在  其他
关注(0)|答案(9)|浏览(127)

使用background-size:cover以400x200的背景图像覆盖浏览器的视口:

html, body {height:100%;}
body {background:url("http://lorempixel.com/g/400/200/") center no-repeat; background-size:cover;}

我想通过javascript检索应用于图片的计算background-size值,例如1536px 768px
实时演示:https://codepen.io/abernier/pen/rHkEv

NB:我只想阅读它,而不是计算它(因为在某种程度上,浏览器已经有了)

gdx19jrr

gdx19jrr1#

我知道我很晚了党,但我已经使用下面的代码来解决这个问题.

var backgroundImage = new Image();
    backgroundImage.src = $('my_div_id').css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");

    backgroundImage.onload = function() {
        var width = this.width;
        var height = this.height;

        var object = $('#my_div_id');

        /* Step 1 - Get the ratio of the div + the image */
        var imageRatio = width/height;
        var coverRatio = object.outerWidth()/object.outerHeight();

        /* Step 2 - Work out which ratio is greater */
        if (imageRatio >= coverRatio) {
            /* The Height is our constant */
            var coverHeight = object.outerHeight();
            var scale = (coverHeight / height);
            var coverWidth = width * scale;
        } else {
            /* The Width is our constant */
            var coverWidth = object.outerWidth();
            var scale = (coverWidth / width);
            var coverHeight = height * scale;
        }
        var cover = coverWidth + 'px ' + coverHeight + 'px';
        alert('scale: ' + scale + ', width: ' + coverWidth + ', height: ' + coverHeight + ', cover property: ' + cover);
    };

详细的演练可在此处http://www.gene.co.uk/get-computed-dimensions-background-image-background-size-cover/找到

5jvtdoz2

5jvtdoz22#

可以使用Image对象获取背景图像文件的尺寸,然后将其与元素的大小进行比较

var element = ...

var img = new Image()
img.onload = compare;
img.src = 'path/to/your/background-image'

function compare() {
  var fx = element.offsetWidth/img.width;
  var fy = element.offsetHeight/img.height;
  console.log(fx, fy);
}

然后,根据background-size属性的值,可以获得精确的比例因子

function compare() {
  var fx = element.offsetWidth/img.width;
  var fy = element.offsetHeight/img.height;

  var bs = window.getComputedStyle(element, null).backgroundSize;
  switch (bs) {
    case 'cover': console.log(Math.min(fx, fy)); break;
    case 'contain': console.log(Math.max(fx, fy)); break;
    case '100% 100%': console.log(fx, fy);
    default: console.log("Umm...");
  }
}

默认情况比较复杂,因为背景大小的每一部分都可以用单位表示,所以正确处理这些单位的代码会有点粗糙和难看。
基于jQuery的fiddle

qqrboqgw

qqrboqgw3#

background-size属性指定了背景图像的大小,而不是它的“缩放因子”。你能从这个属性中得到的唯一东西就是它的大小。如果这个因子存在的话,它应该在 * 另一个 * 属性(-ies)中。你挖错地方了。
回答这个问题时,我不得不问自己另一个问题:* 这个号码存在吗?*
让我们先假设它是这样的,并且值是2.135(是原来的两倍)。如果我把cover改为100% 100%,这个数字会发生什么变化。在这种情况下,“水平缩放因子”保持与cover相同,而“垂直”缩放因子发生了不同的变化。你期望这个数字是什么?它应该如何变化?
一个因素可能改变,而另一个因素可能不变,这一事实使我认为它们可能改变(并且应该)是单独的值(谁知道,也许“-vendor-background-size-x-zoom-factor”和“-vendor-background-size-y-zoom-factor”两者都可以具有正值和负值并且两者都不包括在任何CSS规范中并且两者都将保持在浏览器的罩下,* 假设它们是CSS属性的形式,而不是简单的变量或谁知道是什么 *)。
当然,实际上可能会更复杂一点))

slsn1g29

slsn1g294#

现在还不是答案,但我正在做的检查...
我对一个类似的属性background-position做了一个小测试,它也接受关键字,如centerleft ...(隐含%),就像background-sizecover/contain所做的那样
让我们使用以下内容沙盒化div

var div = document.createElement('div');
div.style.cssText = "background-position:center 3%;";
document.body.appendChild(div);

现在,让我们使用以下命令检索center值:

window.getComputedStyle(div, null)
      .getPropertyCSSValue('background-position-x')
      .getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE);

你猜怎么着

50

不幸的是

var div = document.createElement('div');
div.style.cssText = "background-size:cover;";
document.body.appendChild(div);
window.getComputedStyle(div, null)
      .getPropertyCSSValue('background-size')
      .getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE);

抛出错误:
无效访问错误:基础对象不支持某个参数或操作。

qzwqbdag

qzwqbdag5#

简单地说,浏览器没有提供一种方法来获得背景图像的比例因子的计算值,但是您可以根据规范中描述的规则自己计算它。

cgh8pdjw

cgh8pdjw6#

你可以检查div和原始图像的大小,找出div的宽度或高度是否按比例变短,这意味着图像被拉伸到较小边的100%。例如:如果容器div为600 px X 500 px,图像大小为600 px X 400 px,则图像将调整大小以覆盖整个div,因此其大小将调整为自动X 500 px,这意味着图像的缩放比例为500/400 = 1.25

4uqofj5v

4uqofj5v7#

没有办法做到这一点,因为它需要加载图像才能给予你一个准确的值。即使这个值是公开的,你也必须等待window.load事件,然后才能检索它...在这一点上,只计算你自己的值会更快。
更新:根据CSS规范,背景大小在不同的条件下表现不同--无论图像是否具有固有的尺寸/比率(jpeg/svg)(css渐变),是否两个值都设置为“auto”(在这种情况下,它被视为“contain”),是否其中一个“background-repeat”值设置为“round”,是否有多个背景......你明白了。
另外,background-size需要layout(随布局而变化),但不在布局后计算为实际“使用”值的属性列表中。这一点很重要,因为getComputedStyle返回实际“使用”值,但“background-size”不经历计算值-〉使用值的过程。
再加上你甚至不能得到一个值,直到图像加载的事实...我仍然认为,计算它自己听起来像你最好的选择。

xkrw2x1b

xkrw2x1b8#

尝试:
background-size: contain
这将放大/缩小,并根据设备像素比适合背景大小。这里不需要JavaScript或任何计算,因为浏览器将自行执行其余任务。

u1ehiz5o

u1ehiz5o9#

验证码:

body{background: url('images/bg.jpg') no-repeat fixed; display: block;height: auto;max-width: 100%;}
body{background-size:cover}

注:background-size:cover单独定义

相关问题