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

Question

我想弄清楚如何动态地将边距插入“mainImage”。我想要做的是垂直居中图像，它具有动态高度和宽度(以及动态客户端视口(viewport))。我不知道如何在从 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'来设置边距而不是内联。 em 将确保边距相对于包含元素的大小。

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

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

我不是 100% 确定您的图片已经有高度，所以请告诉我这是否有效。如果没有，我会在有空的时候检查一下。快乐的编码。