如何居中放置各種圖像並使其適合容器

Question

我正在使用bxslider具有圖像輪播。 事實是，它接收到顯示的圖像大小有些無法預測。 容器尺寸為243x243。 而且我們知道沒有一個圖像的邊小於243。所以...我想將圖像居中放置在容器中。 並放大直到在243中較小的兩個維度（L與W）填充容器，並且隱藏較長的維度溢出。

對於我正在處理的圖像，這樣做非常適合於獲得相框中圖片的重要細節。

但是我有麻煩

我嘗試了以下方法將圖片在框架中居中：

jQuery(".bx-container").each(function() {
 var img_w = jQuery(this).children("img").width();
 var img_h = jQuery(this).children("img").height();
 var pos_top = (img_h - containerHeight) / 2;
 var pos_left = (img_w - containerWidth) / 2;

 var pos_top = (243 - img_h) / 2;
 var pos_left = (243 - img_w) / 2;

 jQuery(this).children("img").css({
     'top' : pos_top + 'px',
     'left' : pos_left + 'px'
 });
});

我已經嘗試過將非方形圖像放置在框架中：

jQuery(".bx-container").each(function(){

var refRatio = 1;

var imgH = jQuery(this).children("img").height();
var imgW = jQuery(this).children("img").width();

if ( (imgW/imgH) < refRatio ) { 
    jQuery(this).addClass("bx-portrait");
} else {
    jQuery(this).addClass("bx-landscape");
}
});
});

我已經弄亂了腳本和CSS，但是似乎無法正常工作。 它要么居中，但沒有正確調整大小。 或調整大小但居中錯誤。 還是兩者都錯了。

這是jsfiddle： http : //jsfiddle.net/vgJ9X/298/

有人可以幫我嗎？

謝謝！

編輯：

新的jsfiddle ...肖像功能正常。 風景圖像仍然變形。 :(

http://jsfiddle.net/vgJ9X/307/

編輯：我認為這與相對放置的元素不允許重疊有關。 試圖找到解決辦法。 如果有人知道，請編輯我發布的最后小提琴。

Answer 1

 jQuery(".bx-container img").each(function () {
    var w = jQuery(this).width();
    var h = jQuery(this).height();
    if (w > h) $(this).addClass('bx-landscape');
    else $(this).addClass('bx-portrait');
});

檢查此更新的JSFiddle

更新資料

jQuery(".bx-container img").each(function () {
    var w = jQuery(this).width();
    var h = jQuery(this).height();
    if (w > h){
        $(this).addClass('bx-landscape');
        var trans= -243/2;
        $(this).css('-webkit-transform','translateZ('+trans+'px)');
    }
    else if(h > w){
        $(this).addClass('bx-portrait');
        var trans= -243/2;
        $(this).css('-webkit-transform','translateY('+trans+'px)');
    }
});

檢查這個JSFiddle

更新更新

發現橫向問題，該插件設置max-width:100%; 用max-width:none;覆蓋它max-width:none; 解決問題...

更新的小提琴的更新

Answer 2

嘗試這個：

img{
    position:relative;
    height:100%;
    width:300px;
}

簡單干凈。

演示： http ： //jsfiddle.net/vgJ9X/302/

Answer 3

我對您的jsfiddle做了幾件事。

首先，我更改了resize和center功能的順序，因此調整大小是第一位的。 這樣，較小的圖像將被調整大小，然后居中。 我也沒有注釋您的代碼的第一部分。

您的CSS也有一些錯誤。 img樣式聲明后有一個額外的結束括號。 您的.bx-portrait img和.bx-landscape img聲明設置為100%px; 。

更新：

將兩個.bx類中的css更改為：

.bx-portrait img {
    height: 100%;
    width: auto;
}
.bx-landscape img {
    height: auto;
    width: 100%;
}

並為您的ul添加一個clearfix：

.bxslider:after {
    content: '';
    clear: both;
    display: table;
    padding: 0;
    margin: 0;
}

該高度是可裁剪的，因為.bx-viewport的設置高度為243px但也有5px border ，這使實際內部高度為233px 。 您需要將高度253px為253px以占邊框的10px 。 這就是為什么它們看起來不垂直居中的原因。

演示

Answer 4

您為什么不只使用背景圖像而是將它們居中。 這是原始代碼的演示

http://jsfiddle.net/8y8df/

如果要顯示完整尺寸的圖像，只需刪除background-size:contain; 從CSS。