Question

我在较小的div 320x460px中显示图像1000x1000px with overflow：auto，因此您可以在div中滚动图像。当我加载页面时，图像从图像的左上角显示，我想知道如何以图像为中心显示图像？

感谢任何意见，谢谢。

这是代码。在我的索引文件中，我加载了这样的页面：

$('#kartamap').load('imagemap.html', function() {
                    alert(".load has loaded");  
                    imagescroll();                                                                     

                           });

这是我的页面。

<div id="themap">

 <div id="imagediven" style="height:460px; width:320px;">

  <img src="image.png" width="1000px" height="1000px"/>

  </div>

<style>
#imagediven {
    overflow:auto;
    height:460px;
    width:320px;
    position:relative;
}

</style>

    <script type="text/javascript">

    function imagescroll(){
    var element = document.getElementById('imagediven'), /* This is your div */
            scrollHeight = element.scrollHeight,
            scrollWidth = element.scrollWidth;
        clientHeight =$(window).height();
            clientWidth = $(window).width();

        alert(scrollHeight);//this is not displaying the image height?
        alert(clientHeight);//this is getting a value off the screen

    element.scrollTop = (scrollHeight - clientHeight) / 2;
    element.scrollLeft = (scrollWidth - clientWidth) / 2;
    }

    </script>

</div>

Answer 1

您可以为容器div指定320px宽度和460px高度。然后在css中为你的图像应用25％的边距......它会将你的图像从四面八方对齐。

这是HTML

<div id="img">
 <img src="Chrysanthemum.jpg" />
</div>

这是CSS

div#img
{
width:320px;
height:460px;
overflow:scroll;

}
div#img img{margin:0 auto;padding:0;margin:25%;}

Answer 2

如果您打算在100％的时间内使用相同尺寸的图像，那么您绝对可以放置它。

.className {
  height: 460px;
  position: relative;
  overflow: hidden;
  width: 320px;
}
.className img {
  left: 50%;
  margin: -500px 0 0 -500px;
  position: absolute;
  top: 50%;
}

我已经在1000px x 1000px的图像上完成了这项工作。

另外，我已经把一个jsFiddle放在一起让你在行动中查看它。

http://jsfiddle.net/7x2JR/

Answer 3

检查background-position属性。

您还可以使用background-size: cover（或包含）使其适合您的div。

Answer 4

div img
{
margin:auto;
width:320px;
height:460px;
vertical-align:middle;
}

Answer 5

你为什么不试试：

text-align:center;

Answer 6

我认为scrollTop是您正在寻找的属性，请查看此SO问题：Scroll Position of div with "overflow: auto"

（实际上，您不希望将图像居中在div中，而是将div滚动到中心。）

Answer 7

试试这个

    <div text-align:center">
    <img src="img.png">
    </div>

Answer 8

我认为您正在尝试将div滚动到img的中心。

您需要使用Javascript属性scrollTop和scrollLeft

要滚动到中心，您需要将值设置为

scrollTop = (scrollHeight - clientHeight) / 2;
scrollLeft = (scrollWidth - clientWidth) / 2;

JS：

var element = document.getElementById('container'); /* This is your div */

element.scrollTop = (element.scrollHeight - element.clientHeight) / 2;
element.scrollLeft = (element.scrollWidth - element.clientWidth) / 2;

选中此JSFiddle

如何将图像居中在div中？

8 个答案: