在圖像上添加邊距？

我想弄清楚如何動態地將邊距插入到「mainImage」中。我想要做的是垂直居中的圖像，它具有動態的高度和寬度（和動態客戶端視口）。我無法弄清楚如何將利潤添加到圖像作爲他們正在從JavaScript加載中...在圖像上添加邊距？

我有以下HTML：

<div id="content"> 
    <img id="left" onclick="prevImage('images/52/image_','mainImage',52)" src="icons/arrow_left.png" /> 
    <img id="right" onclick="nextImage('images/52/image_','mainImage',52)" src="icons/arrow_right.png"/> 
    <img id="mainImage" src="images/52/image_0.jpg" onload="addMargins()" /> 
</div>

與下面的CSS：

div#content{ 
    position: absolute; 
    margin-left: 20%; 
    margin-right: 5%; 
    width: 75%; 
    height: 95%; 
    text-align: center; 
} 

div#content img#left{ 
    position: absolute; 
    left: 0; 
    top: 50%; 
} 

div#content img#right{ 
    position: absolute; 
    right: 0; 
    top: 50%; 
} 

div#content img#mainImage{ 
    max-height: 100%; 
    max-width: 95%; 
}

和JavaScript：

var key = 1; 

function nextImage(thePath, id, max) 
{ 
    if(key == max) 
    { 
     key = 1; 
    }else{ 
     key++; 
    } 
    var image = thePath + key + ".jpg"; 
    document.getElementById(id).src= image; 
}; 

function prevImage(thePath, id, max) 
{ 
    if(key == 1) 
    { 
     key = max; 
    }else{ 
     key--; 
    } 
    var image = thePath + key + ".jpg"; 
    document.getElementById(id).src= image; 
};

所以我的想法是做一些在javascript，基本上SA ys：

"var viewport= viewport.height; 
var mainImage= mainImage.height; 
set marginTop to (viewport-mainImage)/2; 
set marginBottom to (viewport-mainImage/2;"

並且通過「next/prev」按鈕加載每個圖像。

來源

2012-07-03 Eric Wolf

可能的重複http://stackoverflow.com/questions/11284637/center-an-image-inside-a-div –

不，圖像尺寸是未知的（我希望最大可能），並且因爲它是動態的（最大寬度：100％等），其基於瀏覽器/視口/設備等而變化 –

同樣在上述問題中。 –

我不會說這是做這件事的最好方法。你可能想要在你的CSS中使用'em'來設置邊距而不是內聯。 em將確保邊距與包含元素的大小相關。

但是，如果你想這樣做，那麼你是在正確的軌道上。您需要獲取對圖像的引用，然後設置樣式的marginTop屬性。

var elem = document.getElementById(id); //reference to image 
elem.style.marginTop = (viewport-mainImage)/2; 
elem.style.marginBottom = (viewport-mainImage)/2;

我不是100％確定您的圖片已經有高度，所以讓我知道這是否有效。如果不是的話，我會在有片刻時檢查一下。快樂的編碼。

來源

2012-07-03 06:00:27 Stumpy7

如果獲取高度，則在頁面（圖像？）加載之前不會將其應用於圖像。 'var elem = document.getElementById（id）; //引用圖片 var viewport = document.documentElement.clientHeight; elem.style.marginTop =（viewport-elem.height）/ 2; elem.style.marginBottom =（viewport-elem.height）/ 2;' –

在圖像上添加邊距？

回答

相關問題