CSS在缩放图像上向左滚动

使用overflow:auto缩放居中图像时，即使图片溢出周围div的左边框，也不可能向左滚动

图像应该居中，并以相同的方式向左和向右生长。达到包装器大小时，应显示滚动条

有什么解决办法吗

快速移动
身体{
背景#666666；
}
.内容{
背景：#C3C3；
宽度：80%；
身高：100%；
保证金：自动；
}
.img包装{
显示器：flex；
证明内容：中心；
宽度：自动；
溢出：自动；
保证金：0自动；
}
.我的形象{
高度：400px；
变换原点：顶部；
}
.slidecontainer{
位置：绝对位置；
底部：50px；
左：47%；
背景：#0b1e2a；
}
函数缩放（id、值）{
var scale=“比例（“+value+”）
var style=“-ms转换：“+scale+”-webkit转换：“+scale+”转换：“+scale；
document.getElementById（id）.setAttribute（“样式”，样式）；
}
var imgSlider=document.getElementById（“img滑块”）；
imgSlider.oninput=函数（）{
乘数=3；
var zoomlevel=1+this.value/100*乘数；
缩放（“培根”，缩放级别）；
}

请尝试更新的代码

快速移动
身体{
背景#666666；
}
.内容{
背景：#C3C3；
宽度：80%；
身高：100%；
保证金：自动；
}
.img包装{
显示器：flex；
证明内容：中心；
宽度：自动；
溢出：自动；
保证金：0自动；
位置：相对位置；
}
.我的形象{
高度：400px；
变换原点：顶部；
}
.slidecontainer{
位置：绝对位置；
底部：50px；
左：47%；
背景：#0b1e2a；
}
函数缩放（id、值）{
var outerDiv=document.getElementById（'img-wrapper'）；
var imgEle=document.getElementById（id）；
var scale=“比例（“+value+”）
var origin=“top”；
var translateX=''；
if（outerDiv.clientWidth！==outerDiv.scrollWidth）{
origin=“左上角”；
translateX='translateX（+-imgEle.offsetLeft）+'px'；
}
var style=“-ms-transform:”+translateX+scale+”-webkit-transform:“+translateX+scale+”transform-origin:“+origin+”；”；
document.getElementById（id）.setAttribute（“样式”，样式）；
outerDiv.scrollTop=outerDiv.scrollHeight/2-outerDiv.clientHeight/2；
outerDiv.scrollLeft=outerDiv.scrollWidth/2-outerDiv.clientWidth/2；
}
var imgSlider=document.getElementById（“img滑块”）；
imgSlider.oninput=函数（）{
乘数=3；
var zoomlevel=1+this.value/100*乘数；
缩放（“培根”，缩放级别）；
}

谢谢，这很有效。增加一项。现在需要将图像向左移动包装大小的一半。我不能满足你的要求。请发送一张您期望的屏幕截图。如果您将图像缩放到有足够的空间滚动到左侧，请滚动到最左侧。有一个垂直的灰色空间不应该存在。不幸的是，移动留有负边距的图像并不能解决问题。