如何在div中放置圖像？

Question

我在一個較小的div 320x460px中使用overflow：auto顯示圖像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> 

Answer 1

我認爲你正試圖將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

文檔： scrollTop | scrollLeft | scrollHeight | scrollWidth | clientHeight | clientWidth

Answer 2

檢查background-position屬性。

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

Answer 3

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

Answer 4

你爲什麼不嘗試：

text-align:center; 

Answer 5

我覺得scrollTop是你正在尋找的屬性，看看這太問題：Scroll Position of div with "overflow: auto"

（實際上，你做不想將圖像居中在div內，而是將div捲動到中心。）

Answer 6

試試這個

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

Answer 7

您可以將320px寬度和460px高度分配給容器div。然後將25％的邊距應用於CSS中的圖像...它會將圖像從四面八方對齊。

下面是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 8

如果您打算在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/