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

Question

问题定义

我必须渲染图像，就好像它是在容器内被裁剪一样。我拥有的唯一数据是 img网址及其界限百分比值，表示为数值（左：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-images： 虽然我需要像绝对值定位这样的东西，但使用这个百分比值。

有关如何解决此问题的任何想法？

Answer 1

您可以将其设置为background-image伪元素之一，并将其​​设置为绝对定位，而不是设置元素本身的:before/:after。 top/left/right/bottom属性设置绝对定位元素的左上角位置。这里的实例：https://jsfiddle.net/1oyewhuo/

＆＃13;

＆＃13;

#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 */;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;