以编程方式设置 css 对象位置属性

Question

我正在使用 object-fit 和 object-position css 属性来控制图像在 css 中的位置。我想以编程方式使用 javascript 设置该位置。我试过了：

const panPos = 50;
document.querySelector('.image').style.objectPosition = `${panPos}% 0%`;

什么也没发生。

我可以控制台日志 element.style 并且我看到一个 objectPosition 属性，但是设置它似乎没有效果。

请注意，我不是在谈论 position 属性（绝对、相对等）。

我还可以使用 jquery 设置此属性使用：

$('.image').css({
      'object-position': `${panPos}% 50%`  
    });

但我想避免 jQuery。有什么想法吗？

Answer 1

您还需要将 object-fit 设置为 none。它们一起使用，否则 object-position 将被忽略。所以：

const panPos = 50;
document.querySelector('.image').style.objectFit = 'none';
document.querySelector('.image').style.objectPosition = `${panPos}% 0%`;

更多信息请参考：

以编程方式设置 css 对象位置 属性

set css object-position property programmatically

javascript

css

jquery

object-fit

以编程方式设置 css 对象位置属性