0

我试图弄清楚如何在“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;"

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

4

1 回答 1

0

我不会说这是最好的方法。你可能想看看在你的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% 确定您的图像是否已经具有高度，因此请告诉我这是否有效。如果没有，我会在有时间的时候检查一下。快乐编码。

于 2012-07-03T06:00:27.607 回答