在 Javascript 中计算一段背景图像的边界

Question

有没有办法计算背景图像的一段矩形边界（例如图像白色背景上的红色圆圈），它按背景大小缩放：覆盖，即使它有负值并且超出移动设备视口？ 另一种解决方案是在背景图片位置上固定 x/y 坐标。

CSS:

  .background{
     position: absolute;
     width: 100%;
     height:100%;
     background: url('img.png') no-repeat;
     background-size: cover;
     background-position: 50% 0;

}

这是我做的笔。 您必须缩放浏览器才能看到图像的行为-

http://codepen.io/kmpkt/pen/MbzxvM

有没有人有解决这个问题的想法？

Answer 1

CSS background-size: cover

应用于元素的 cover; 的 background-size 值会导致背景图像缩放，同时保持其纵横比，以便缩放后的图像与元素的宽度或高度相匹配，并且不比它小。

可以通过比较元素和背景图像的纵横比来找到所需的缩放值，在比较中使用 width/height 商。

如果元素的纵横比高于图像的纵横比，则使用以下缩放值来扩大或缩小图像以适应：

    scale = element.width/image.width; // the element is more "landscape" than the image

如果不是，图像将被放大或缩短以适应缩放值：

   scale = element.height/image.height; // the element is more "portrait" then the image.

注意背景图片的宽度和高度使用相同的系数缩放。

背景图像中感兴趣区域 (ROI) 的尺寸和偏移必须按上面确定的相同比例因子进行缩放。

CSS background-position: 50% 0;

我知道这不会改变背景的 y 位置，但如果需要在任一侧进行裁剪，则会将背景沿 x 轴居中。在没有 x 轴裁剪的情况下，缩放的背景图像根据定义居中。

如果缩放后​​的图像宽度大于元素的宽度，则背景需要向左移动差值的一半：

xTranslation = (elementWidth - scaledImageWidth) / 2  // scaledImageWidth > elementWidth,

如果不是，则不需要翻译：

xTranslation = 0 // scaled image width == element width

背景图像中感兴趣区域的先前缩放的 x 轴偏移需要应用上面确定的 x 平移。

查找背景元素的大小。

element.getClientBorderRect()

returns 包含元素宽度和高度值的对象。

避免 使用document.clientWidth 和document.clientHeight 来获取视口的尺寸。 clientHeight 返回正文元素高度的最大值。这可以小于视口的高度。