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

Question

有没有办法计算背景图像的一段矩形边界(例如图像白色背景上的红色圆圈)，它按背景大小缩放:覆盖，即使它具有负值并且在移动设备视口(viewport)之外？ 另一种解决方案是在背景图片位置固定 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 值会导致背景图像缩放，同时保持其纵横比，以便缩放后的图像与宽度匹配或元素的高度，并且不小于它。

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

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

    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 背景位置:50% 0;

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

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

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

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

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

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

查找背景元素的大小。

element.getClientBorderRect()

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

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