javascript - 根据图像的高度/宽度定位图像

Question

我正在编写一个用作幻灯片的简单脚本。它基于 this script .

背景:

大多数这些类型的脚本(包括更高级的脚本)都存在这样的问题，即它们可以很好地处理横向风格的图像，但实际上会弄乱纵向风格的图像。所以我正在尝试或多或少地从头开始构建一些东西。

问题

我希望我的图像位于页面中央。所以我使用 position:absolute; 和 left:50%; 和 top:50%; 放置最左边和最上面的边缘图像的正确位置。但是要使其居中，您需要执行 left:50% - imageWidth/2 (这显然在 CSS 中不存在)

所以我需要使用 javascript 来获取图像的高度/宽度，并根据需要更改它的左侧和顶部位置。

这是我的 HTML:

<div class="fadewrapper">
    <div class="fadein">
        <img src="../Content/images/samples/1.jpg">
        <img src="../Content/images/samples/2.jpg">
        <img src="../Content/images/samples/3.jpg">
    </div>
</div>

这是我的 CSS:

.fadewrapper {width:100%; height:100%;}
.fadein { display:inline-block;}
.fadein img {position:absolute; top:50%;}

我对 javascript 的了解有限，但我找到了这个脚本(在 SO 上):

var img = new Image();
        img.onload = function () {
            alert(this.width + 'x' + this.height);
        }
        img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

此脚本有效，但我不知道如何使用我页面上的图像以及如何调整其位置。非常感谢任何帮助。

Answer 1

给你。这会将图像设置在包装器的正中心。

 win_width = $('#fadewrapper').width();
 win_height = $('#fadewrapper').height();
 border = $('#framewrapper').css('borderWidth');
 $('.fadein img').each(function(){
     $(this).css({
         'left' : (win_width - $(this).width() - border ) / 2,
         'top': (win_height - $(this).height() - border ) / 2
     });
 })

这是一个 jsFiddle工作示例。它根据窗口大小使用react。调整输出窗口的大小以查看它的 react