Javascript 如何在较小的div内制作图像中心（垂直和水平）

我有一个1024x768px的div。我想在DIV的中间显示一个1920×1080的PX图像，并用滚动div继续可见。

怎样才能做到呢

这是测试代码

var el=document.querySelector（'div.mainDiv'）；
var newWidth=Math.ceil（$（“#baseImg”）.width（）/2）；
var newHeight=Math.ceil（$（“#baseImg”）.height（）/2）；
el.scrollLeft=新宽度；
el.scrollTop=新高度


这可能会有所帮助


.container{
位置：相对位置；
宽度：200px；
高度：200px；
溢出：滚动；
}
.我的形象{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
您需要做的就是告诉图像它不能大于容器div

<div id="div-one">
  <img src="http://lorempixel.com/400/400" alt="">
</div>

#div-one {max-width: 200px;}
#div-one img {max-width: 100%}


#第一分区{最大宽度：200px；}
#div one img{最大宽度：100%}

作为背景图像，你也可以这样做

<div id="div-one">
  <p>some text</p>
</div>

#div-one {
  max-width: 200px;
  height: 200px;
  background: url("http://lorempixel.com/400/400");
  background-position: center;
  background-size: cover;
}


一些文本

#第一组{
最大宽度：200px；
高度：200px；
背景：url（“http://lorempixel.com/400/400");
背景位置：中心；
背景尺寸：封面；
}
简单解决方案


div{display:flex；align items:center；}
img{
保证金：自动；
对象匹配：覆盖；
显示：块；
溢出：隐藏}
您的Css应该是这样的：容器类（.container）具有固定的宽度和高度，x和y上都有溢出。要居中添加类（.centerDivWrapper）

你的HTML应该是这样的。要使div居中，请添加包装（centerDivWrapper）


你应该提供一个现场演示，以及你到目前为止所做的事情。类似这样的-->？不可能重复这个问题不是我的问题。我想在较小的div上显示大图片，并滚动div以显示图片的所有部分@Alexander在这种情况下，您的问题是，在较小的div上显示的“我想要真实尺寸的图像”的可能副本如何
1920px
图像适合真实尺寸的
1024px
宽度div？它将根据大小比例进行调整，并在div@znaneswar上设置溢出属性。在您的新更新中，如果我在div上设置滚动，我将丢失图片的左右部分。它只在通话中滚动。您需要在两侧滚动吗？让我知道你到底需要什么。这样我就丢失了部分图片我想在div上使用溢出。可以在scroll上使用图片所有部分的容器OK i ll edit it it it you want能够滚动图像的真实大小如果它大于你的尺寸必须更新解决方案我应该将div滚动到中间吗？你是什么意思？您可以在容器的左侧或右侧放置滚动条。我不想在Div的背景上使用image。我在image上使用map
.centerDivWrapper{
width:1024px;
height:768px;
margin-left:auto;
margin-right:auto;
}
.container{
width:1024px;
height:768px;
float:left;
position:absolute;
overflow-x:auto;
overflow-y:auto;
}
.imgclass{
height:auto;
float:left; 
}

<div class="centerDivWrapper">
<div class="container">
<img class="imgclass" alt="YourAltSrc" src="YourImageSource">
</div></div>