jQuery的設置自適應頂邊距圖像

THI是我的代碼：jQuery的設置自適應頂邊距圖像

<html> 
<body> 
    <div id="id"> 
    <div class="one"> 
     <img> 
    </div> 
    <div class="two"> 
     <img> 
    </div> 
    <div class="one"> 
     <img> 
    </div> 
    </div> 
</body> 
</html>

我不知道的div和圖像的高度，我想相對於股利和IMG高度頂邊距設置只有當img比div小，並且只在div class =「one」時。

這是我的jQuery代碼：

$(document).ready(function() { 
    $(".one").each(function(){ 
    var wrapH = $(".one").outerHeight(); 
    var imgH = $("img").outerHeight(); 
    var padTop = (wrapH-(imgH))/2; 
     if (padTop>0){ 
     $("img").css("margin-top", padTop + "px"); 
     } 
    }); 
});

這改變了所有的圖像邊緣...幫助

來源

2013-05-31 web-tiki

夥計，你已經發布了這個。 – nouveau

你需要預加載圖像知道的高度，否則你永遠不會得到每張圖像的正確的高度：內

$(document).ready(function() { 
    $(".one").each(function(){ 
    var wrap = $(this), 
    wrapH = wrap.outerHeight(), 
    img = wrap.find('img'), 
    image = new Image(), 
    imgH = 0, 
    padTop = 0; 

    image.onload = function() { 
     imgH = img.outerHeight(); 
     padTop = (wrapH - (imgH))/2; 
     if (padTop > 0){ 
      img.css("margin-top", padTop + "px"); 
     } 
    } 

    image.src = img.attr('src'); 

    }); 
});

另外，請注意使用$（本）的「每個「方法上下文在每個」每個「步驟中獲取當前的'.one'元素，以及jQuery的find方法來定位指定元素的子元素的img標記。使用$（'。one'）和$（'img'）將始終選擇文檔中的每個「.one」和「img」元素。

來源

2013-06-01 05:14:25 bdmoura

完美，你回答我的問題。我真的需要學習有關jquery的moe！ thx –

最後一個問題：最後一個代碼行是什麼？（「image.src = img.attr（'src'）;」） –

image.src = img.attr（'src'）使用image標籤的src屬性設置javascript Image類實例的src屬性。當這個屬性被設置時，圖像開始加載，一旦它被加載，它就會觸發onload事件監聽器。 – bdmoura

嘗試改變
var imgH = $("img").outerHeight();到
var imgH = $(".one img").outerHeight();

而且改變
$("img").css("margin-top", padTop + "px");到
$(".one img").css("margin-top", padTop + "px");

來源

2013-05-31 22:03:34 Fallexe

太棒了，這解決了我的一個問題，它只能使用正確的圖像，但它仍然給出了相同的邊緣 - 兩個圖像... –

jQuery的設置自適應頂邊距圖像

回答

相關問題