居中圖片

我想在一個div中溢出隱藏的圖像中心居中圖片

像一個框架，然後圖片不管大小都居中。更多信息

<div class="holder"> 
    <div id="frame"> 
     <img src="http://www.travelblog.org/Wallpaper/pix/tb_fiji_sunset_wallpaper.jpg" class="centerme"/> 
    </div> 
</div>

見圖片： enter image description here

標準狀態是怎麼老是要和溢出：隱藏;

，但需要它始終中心即使它的圖片3比幀

*繼承人的jsfiddle http://jsfiddle.net/UL3qp/4/

*編輯
最後需要的是循環這一事件

來源

2012-08-30 Simon Pertersen

分享你的CSS .. – Sowmya

我試過的所有東西都是絕對的，而東西真的不會做出任何解決方案，我不明白這就是爲什麼我問，這是在foreach中使用，所以後端會使它超過150個項目atm。 atm我只是得到了標準的CSS，1秒然後我會做一個jsfiddle –

一個簡單的'文本對齊：中心;'將做的伎倆：http://jsbin.com/ufozol/1/ – balexandre

圍繞圖像with jQuery is simple - 通過設置正或負margin-left屬性：

$(document).ready(function(){ 
    var fwidth = $('#frame').width(); 
    var iwidth = $('#frame img').width(); 
    $('#frame img').css('margin-left', Math.floor((fwidth-iwidth)/2)); 
});

由於只有純CSS可以通過a background image css property而不是使用img標籤來完成。

來源

2012-08-30 10:09:44 Stano

非常感謝！ –

btw我該怎麼做，如果我想要做這個數學與多張圖片 –

然後，我很高興它是有用的。 :)在這裏添加一個循環，以分別居中所有圖像：http://jsfiddle.net/UL3qp/34/ – Stano

添加更大倍款式：

#frame{padding:15px; text-align:center} 
#frame img{max-width:100%}

檢查此小提琴http://jsfiddle.net/HCabZ/

來源

2012-08-30 09:21:02 Sowmya

你的框架是在圖片之下，而不是像問題中的上面。 – lvil

這也只是中心的圖像 –

http://jsfiddle.net/HCabZ/2/嘗試一下本作的垂直align-中心以及右&左中心

來源

2012-08-30 09:30:58 Chandrakant

如果你降低你的框架的大小它不會覆蓋圖片的大小 –

我需要一個特定的幀大小和幀是溢出隱藏。並在其中我需要圖像的中心與框架的中心對齊 –

回答

相關問題