Question

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

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

没有任何反应。

我可以控制log 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对象位置属性

1 个答案: