根據其高度/寬度定位圖像

我正在製作一個簡單的腳本，用作幻燈片。它基於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

根據其高度/寬度定位圖像

回答

相關問題