Javascript 显示可以滚动到较小视口的大图像

我需要将一个较大的图像显示为一个较小的div，以便能够水平滚动来查看它。外部div应该扩展到视口大小（视设备而定，可以是可变的），但不能超过它

我试过这样做：

#外部分区{
最大宽度：300px；//只是一个猜测，但我这里需要准确的视口大小
溢出：自动；
}
img{
位置：绝对位置；
左：50%；
-webkit转换：translateX（-50%）；
}

'

您所需要做的就是约束图像容器元素的大小（这里我假设

outer div

），然后设置容器的溢出

要将

max width

设置为视口宽度，请使用：

max width:100vw


$（函数（）{
var imgWidth=document.querySelector（“#outer div img”）.width；
//将容器滚动至图像宽度的1/2
$（“#外部分区”）.scrollLeft（（imgWidth-$（“#外部分区”）.width（））/2）；
});
#外部分区{
最大宽度：100vw；/*不超过视口宽度的100%*/
溢出-X：滚动；/*显示水平滚动的滚动条*/
}

您也应该在此处包含HTML。在问题中提供必要的HTML以复制您遇到的问题。您可以编辑问题并使用内联代码段工具提供可运行的代码段。否则，您的问题可能会被否决或关闭@jmargolisvt假设“fiddle”意味着JSFiddle-请不要建议用户使用外部资源提供他们的示例。复制问题的代码必须包含在问题本身中。像JSFiddle这样的东西实际上应该只是作为一种补充。@jmargolisvt甚至比小提琴更好的是在这里发布一个片段。外部链接可能会随着时间的推移而消失。@Pete，因为
div
的父级的宽度可能比为其设置的视口宽。已编辑的问题包括html和JSFIDLE，但视口问题很难复制。非常感谢！如何设置（默认情况下）以50%水平滚动显示图像？@FabioMarzocca您的意思是要将图像向右推到父对象宽度的50%吗？不，我的意思是在div（视口）中水平居中@FabioMarzocca更新了更好的答案，自动滚动图像宽度的1/2。太好了！再次感谢