0

我在一个较小的 div 320x460px 中显示一个 1000x1000px 的图像，并带有溢出：自动，因此您可以在 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>
4

8 回答 8

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%;}
于 2013-09-26T09:39:01.970 回答
1

如果您要在 100% 的时间内使用相同尺寸的图像，您可以绝对定位它。

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

我已经在 1000 像素 x 1000 像素的图像上解决了这个问题。

此外，我已经将 jsFiddle 放在一起供您查看它的实际操作。

http://jsfiddle.net/7x2JR/

于 2013-09-26T09:43:57.103 回答
0

尝试这个

    <div text-align:center">
    <img src="img.png">
    </div>
于 2013-09-26T09:18:11.117 回答
0 
div img
{
margin:auto;
width:320px;
height:460px;
vertical-align:middle;
}
于 2013-09-26T09:12:22.390 回答
0

检查background-position物业。

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

于 2013-09-26T09:08:29.937 回答
0

你为什么不试试：

text-align:center;
于 2013-09-26T09:13:01.830 回答
0

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

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

于 2013-09-26T09:15:04.403 回答
0

我认为您正在尝试将 滚动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

文档： 滚动顶部| 向左滚动| 滚动高度| 滚动宽度| 客户身高| 客户端宽度

于 2013-09-26T09:39:37.253 回答