在图像上添加边距？

我想弄清楚如何动态地将边距插入到“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;' –

在图像上添加边距？

回答

相关问题