在加载时为图像添加边距？

Question

我试图弄清楚如何在“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 中做一些事情，基本上说：

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

并在每个图像通过“下一个/上一个”按钮加载时执行此操作。

Answer 1

我不会说这是最好的方法。你可能想看看在你的 CSS 中使用 'em's 来设置边距，而不是内联。 em 将确保边距相对于包含元素的大小。

但是，如果您想这样做，那么您就在正确的轨道上。您需要获取对图像的引用，然后设置样式的 marginTop 属性。

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

我不能 100% 确定您的图像是否已经具有高度，因此请告诉我这是否可行。如果没有，我会在有时间的时候检查一下。快乐编码。