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

我正在制作一个简单的脚本，用作幻灯片。它基于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';

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

来源

2012-02-24 Johannes

检查此问题http://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen – Cheery 2012-02-24 21:57:08

@Cheery我检查了您的链接。为什么简单的事情变得复杂 – Teemu 2012-02-24 22:45:26

@Cheery：此脚本似乎按照左上角居中。我将不得不做一些挖掘。 – Johannes 2012-02-24 23:11:02

你在这里。这会将图像设置在包装的确切中心。

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

来源

2012-02-24 23:02:24 Birdman

这是完美的 - 只有一个例外。一个快速跟进：它只在调整大小后才中心。这似乎是脚本告诉它假装它自动调整大小来照顾这个，但它似乎并没有在我的实施工作。 – Johannes 2012-02-24 23:25:58

所以我通过简单地将触发器移动到文档底部来解决该问题。然而，它在中心加载而不考虑图像的宽度/高度，直到它被调整大小（意味着它根据图像左上方加载） – Johannes 2012-02-24 23:35:39

任何想法为什么'$（window）.trigger（'resize'）;'doesn' t似乎开火了？ – Johannes 2012-02-27 20:13:09

这可能是值得尝试：

<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 -class，并删除所有其他人。然后对top和height值进行更改，但不要更改IMG -elements中的属性值。如果你不需要它们，ID可以省略。

编辑：

我很抱歉，我没注意检查窗口大小调整。代码已更正。现在可以用较小的窗口大小来确定宽度。

我已经在IE，FF，Opera和Chrome上测试过了。在所有这些浏览器中，图像就像我想要的一样。但是如果我误解了你想要的东西？

来源

2012-02-24 22:33:46 Teemu

这不考虑图形的居中时的宽度，所以我遇到了同样的问题。 – Johannes 2012-02-24 23:07:06

当然可以！你可能仍然有一些额外的定位规则，无论是“fadewrapper”类还是“fade”类。 – Teemu 2012-02-24 23:17:48

没有脚本我看不到这个_could_工作。但我欣赏这种帮助：] – Johannes 2012-02-24 23:27:59

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

回答

相关问题