如何將約束格內溢出的圖像居中

-1

我有一個240x240px div其中包含大小不同的圖像的淡出幻燈片。我將每個圖像設置爲height: 240px，寬度與其高度成比例。有些圖像比它們寬（比例）高，所以我把它們集中在div裏使用這個效果很好，除了溢出的圖像的240px div。我怎麼能夠在div裏面溢出的圖像居中？我想這（jQuery的），但它並不適用於某種原因，我敢肯定，我想不通工作：如何將約束格內溢出的圖像居中

if($("div img").width() > 240) { 
    $(this).css("margin-left", rv); 
    var rv = -1 * ($(this).width()/4) + "px"; 
}

的邏輯存在，如果圖像擴大在寬度div，然後將其轉移到左邊的是rv px，rv是圖像寬度的1/4（因爲1/2會將圖像剪切成左邊一半，所以1/2的1/2有效地居中）？我的第一個猜測是我不能參考$(this)，因爲我正在嘗試，但我不知道。

我知道我可以去添加單獨的內聯CSS樣式，但這很麻煩和平凡。我寧願有一個腳本可以自動計算圖像的中心，然後相應地移動它。有任何想法嗎？

來源

2014-04-06 Jace Cotton

我建議是這樣的：

div.center-img { background:url('/path/img.jpg') center center no-repeat; }

但你的問題會用這樣的回答：

$('div img').each(function() { 
    if(this.width > 240) 
     $(this).css("margin-left", ((this.width - 240)/-2) + "px"); 
});

來源

2014-04-06 01:30:15

謝謝，第二位幫助過我。 –

您可以使用CSS只：

LIVE DEMO

.imgHolder{ 
    border:1px solid #000; 
    width:240px; 
    height:240px; 
    line-height:240px; /* same as element height */ 
    font-size:0;  /* to perfectly vertical align middle the image */ 
    text-align:center; /* to horizontally align middle the image */ 
} 
.imgHolder > img{ 
    max-width:100%; 
    max-height:100%; 
    vertical-align:middle; 
}

來源

2014-04-06 01:21:07

遍歷圖像，當他們已加載獲取圖像的寬度和父元素寬度比較寬，如果圖像的寬度比父圖像寬一半，並從左邊距減去圖像的水平居中。

$("div.centered img").each(function(_,el) { 
    var img = new Image(), 
     parent = $(el).parent(); 

    img.onload = function() { 
     var ma = this.width - $(parent).width(); 
     if (ma > 0) { 
      $(el).css('margin-left', ((ma/2) * -1)); 
     } 
    } 
    img.src = this.src; 
    if (img.complete) img.onload(); 
});

FIDDLE

來源

2014-04-06 01:25:36 adeneo

如何將約束格內溢出的圖像居中

回答

相關問題