Установить свойство css object-position программно

Question

Я использую свойства css object-fit и object-position для управления размещением изображения в 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%`;

Для получения дополнительной информации обратитесь к:

• https://css-tricks.com/almanac/properties/o/object-position/
• https://codepen.io/robinrendle/pen/raGOOJ