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工作示例。它会根据窗口大小做出反应。调整输出窗口的大小以查看它的反应

Answer 2

这可能值得尝试：

<DIV style="position:relative;top:100px;height:300px;text-align:center;white-space:nowrap">
    <IMG id="your_img_id_1" src="your_img_source" height="100%">
    <IMG id="your_img_id_2" src="your_img_source" height="100%">
    <IMG id="your_img_id_3" src="your_img_source" height="100%">
</DIV>

将这些定位规则添加到fadewrapper - 类，并删除所有其他规则。然后对top和height值进行更改，但不要更改height - 元素中的IMG - 属性值。如果您不需要ID，可以省略ID。

编辑：

对不起，我没注意检查窗口调整大小。代码已更正。宽度应该可以使用更小的窗口尺寸。

我在IE，FF，Opera和Chrome中测试了这个。在所有这些浏览器中，图像看起来就像我想要的那样。但如果我错过了你想要的东西吗？

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

2 个答案: