是否可以单独设置img标签object-position属性的x轴与y轴参数？

问题原因 #

• 现行CSS规范中并没有定义object-position-x、object-position-y这类单轴控制属性，和background-position有单独x/y属性的情况不同，object-position相关规范尚未跟进新增单轴属性，因此浏览器暂不支持这两个属性，单独赋值不会生效。
• object-position本身原生支持同时传入x轴、y轴两个偏移参数，两个值用空格分隔即可，不需要依赖单独的单轴属性就能实现双向控制。

解决方法 #

直接修改objectPosition的赋值逻辑，同时传入x、y两个偏移值即可，修改后的代码如下：

const images = document.querySelectorAll('.image');
images.forEach((image) => image.addEventListener('mousemove', (e) => {
  // 同时传入x轴偏移和y轴偏移，空格分隔
  image.style.objectPosition = `${-e.offsetX}px ${-e.offsetY}px`;
}));

如果需要保留默认的初始偏移基准，也可以在对应值的位置保留center、top之类的关键字，比如只改x轴就写${-e.offsetX}px center即可。

内容的提问来源于stack exchange，提问作者lache