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;"

并为每个图像执行此操作，因为它通过“next / prev”按钮加载。

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％确定你的图像已经有高度，所以让我知道这是否有效。如果没有，我会在有片刻时检查出来。快乐的编码。

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

1 个答案: