set css object-position property programmatically

Question

I am using the object-fit and object-position css properties to control the placement of an image in css. I want to programmatically set that position with javascript. I tried:

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

and nothing happens.

I can console log element.style and I see an objectPosition property, but setting it seems to have no effect.

Please note I am not talking about the position property (absolute, relative, etc).

I can also set this property with jquery using:

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

but I want to avoid jQuery. Any ideas?

have you tried using document.querySelector('.image')[0]? Also if you want this to function for multiple elements then you will need to iterate through the node collection and maybe using document.querySelectorAll('.image') would be better for multiple elements. — NewToJS
– NewToJS, Commented Jan 26, 2018 at 0:10

esengineer · Accepted Answer · 2018-01-26 00:42:06Z

2

You need to set object-fit to none as well. They are used together, otherwise, object-position gets ignored. So:

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

For more info, refer to:

answered Jan 26, 2018 at 0:42

esengineer

9,9487 gold badges51 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

set css object-position property programmatically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related