Question

我使用bxslider来获取图像轮播。但事情是，它接收到的图像显示有些不可预测的尺寸。容器尺寸为243x243。而且我们知道没有图像的边会小于243.所以...我想将图像置于容器中心。并且放大直到两个维度中的较短者（L对W）在243处填充容器，并且隐藏较长维度溢出。

对于我正在使用的图像，这样做非常适合在帧中获取图片的重要细节。

但我遇到了麻烦......

我已尝试以下方法将图片置于框架中心：

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');
});

选中此Updated 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;解决问题...

Update Of Updated Fiddle

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计入边界的10px。这就是为什么他们不要垂直居中。

<强> DEMO

Answer 4

为什么不直接使用背景图像并将它们居中。以下是原始代码的演示

http://jsfiddle.net/8y8df/

如果您想要显示完整尺寸的图片，只需从css中删除background-size:contain;。

如何居中并使各种图像尺寸适合容器

4 个答案: