javascript - 背景位置的百分比值；如何改变其行为？

问题定义
我必须渲染一个图像，就好像它是在容器中裁剪的一样。我仅有的数据是img URL及其百分比值的界限，表示为数值（左：86，上：72，右：99，下：12等等）。你可以想象，图像比它的容器还大。
代码段
Javascript

get pictureProperties() {
    const pic = this.discovery.img;
    const x = this.discovery.crop_percentages.left + '%';
    const y = (100 - this.discovery.crop_percentages.top) + '%';
    return `background-image: url(${pic}); background-position: ${x} ${y}`;
}

哈巴狗

.photo-wrapper(style="{{::$ctrl.pictureProperties}}"

问题
我试图将图像定位为容器内的背景，但没有任何运气，因为百分比值对背景图像的作用如下：

虽然我需要一些像绝对值定位，但使用这个百分比值。

你知道我该怎么解决这个问题吗？

最佳答案

不必设置元素本身的background-image，您可以将其设置为一个:before/:after伪元素，并将其设置为绝对定位。属性设置绝对定位元素的左上角位置。现场示例：https://jsfiddle.net/1oyewhuo/

#xyz{
  position: relative;
  height: 200px;
  width: 400px;
  background-color: red;
}

#xyz:after{
  background-image: url("http://lorempixel.com/400/200/sports/2/");
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  content: '';
  top: 50% /* this.discovery.crop_percentages.top */;
  left: 25% /* this.discovery.crop_percentages.left */;
  right: 25% /* this.discovery.crop_percentages.right */;
  bottom: 25% /* this.discovery.crop_percentages.bottom */;
}

<div id="xyz"></div>

关于javascript - 背景位置的百分比值；如何改变其行为？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47683270/