2011-09-26 52 views
1

我有一個包含圖像的容器,並且此圖像是從應用程序加載的,因此容器的尺寸是已知的圖像會有所不同。如何在容器中垂直和水平居中放置img - img可能會大於容器

我現在有下面的CSS:

#secondary_photos { 
    height: 100px; 
    width: 300px; 
    overflow: hidden; 
} 

#secondary_photos .small_photo { 
    float:left; 
    height: 100px; 
    width: 300px; 
} 

#secondary_photos .small_photo img{ 
    height: 100%; 
    width: auto; 
    position: absolute; 
    bottom: 0px 
} 

#secondary_photos .small_photo img{ 
    height: auto; 
    width: 100%; 
    position: absolute; 
    bottom: 0px 
} 

這個工程「沒關係」形成了我:它加載圖像,調整其大小,以佔據容器的寬度的100%,其位置,以便自下而上圖像的一半顯示在容器內 - 因此,如果在將寬度調整爲300像素後圖像的高度爲200px,則只顯示圖像的底部100px(任意設置)。

我試圖做的是始終顯示圖像的中間 - 所以在上面的例子中,圖像將顯示像素50-150(從上往下)..

回答

1

因爲它聽起來像你不知道頁面加載時的圖片大小,你可以使用dead centre和javascript的組合來做你想做的事。流程如下:

  1. 設置標記爲死中心示例。
  2. 加載圖像時,獲取其寬度和高度。
  3. 將圖片邊距設置爲(image width/2 * -1)
  4. 設置圖像頂部到(image height/2 * -1)

既然你也可能有比你的大容器的圖像,你可以添加一個條件檢查此:

// Get DOM elements 
var container = document.getElementById('container'); 
var image = document.getElementById('img'); 

// Check they're good 
if(container && img){ 
    var height = image.height; 
    var width = image.width; 

    // Horizontally centre if container is wider than image 
    if(container.offsetWidth > width){ 
    image.style.marginLeft = Math.floor((width/2 * -1)) + "px"; 
    } 

    // Vertically centre if container is taller than image 
    if(container.offsetHeight > height){ 
    image.style.top = Math.floor((height/2 * -1)) + "px"; 
    } 
} 
相關問題