css - 带有不统一图片的 Twitter Bootstrap 轮播

Question

让我先说我很抱歉发了这么长的帖子。我正在尝试使用 bootstrap carousel，不幸的是我得到的图片并不统一。例如，有些是 100x200，DOE 是 150x100 等。纵横比不同，字母与横向。我尝试了很多事情，包括在 Carousel 中加载我的每张图片时使用以下辅助函数:

function ScaleImage(srcwidth, srcheight, targetwidth, targetheight, fLetterBox) {

    var result = { width: 0, height: 0, fScaleToTargetWidth: true };

    if ((srcwidth <= 0) || (srcheight <= 0) || (targetwidth <= 0) || (targetheight <= 0)) {
        return result;
    }

    // scale to the target width
    var scaleX1 = targetwidth;
    var scaleY1 = (srcheight * targetwidth) / srcwidth;

    // scale to the target height
    var scaleX2 = (srcwidth * targetheight) / srcheight;
    var scaleY2 = targetheight;

    // now figure out which one we should use
    var fScaleOnWidth = (scaleX2 > targetwidth);
    if (fScaleOnWidth) {
        fScaleOnWidth = fLetterBox;
    }
    else {
       fScaleOnWidth = !fLetterBox;
    }

    if (fScaleOnWidth) {
        result.width = Math.floor(scaleX1);
        result.height = Math.floor(scaleY1);
        result.fScaleToTargetWidth = true;
    }
    else {
        result.width = Math.floor(scaleX2);
        result.height = Math.floor(scaleY2);
        result.fScaleToTargetWidth = false;
    }
    result.targetleft = Math.floor((targetwidth - result.width) / 2);
    result.targettop = Math.floor((targetheight - result.height) / 2);

    return result;
}

function OnImageLoad(evt) {

        var img = evt.currentTarget;

        // what's the size of this image and it's parent
        var w = $(img).prop('naturalWidth');
        var h = $(img).prop('naturalHeight');
        //var tw = $(img).parent().width();
        //var th = $(img).parent().height();
        var tw = $(img).parent().parent().parent().parent().width();
        var th = $(img).parent().parent().parent().parent().height();
        // compute the new size and offsets
        var result = ScaleImage(w, h, tw, th, true);

        // adjust the image coordinates and size
        img.width = result.width;
        img.height = result.height;
        $(img).css("left", result.targetleft);
        $(img).css("top", result.targettop);

}

并为轮播的每张图片使用以下内容

<img src="~/Images/Img1_Tall.jpg" alt="Tall" id="firstImage" onload="OnImageLoad(event);" />

对于轮播中的第一张图片，效果很好，但之后的每张图片似乎都只是自然大小并且水平居中，但正好靠在轮播的顶部边框上。

我什至更改了“onload”以传递图像的长度和宽度值，但这也不起作用，在调试中似乎只有第一张图像启动了“onload”事件。

我想要的效果是，如果容器的比例为 3:4，图像的比例为 1:2，则图像会拉伸(stretch)以符合左右边缘，并且会垂直居中并在上方有信箱和下面，但容器不会改变，因此轮播的导航按钮不会移动。如果图像是 2:1，图像将拉伸(stretch)以与顶部和底部水平居中相交，左右两侧有信箱，同样保持导航按钮不变。

任何帮助将不胜感激...包括:

what you are trying to do is crazy

Answer 1

你想做类似http://jsbin.com/zotelasa/1的事情吗？ .使用该代码，我可以获得事件元素 w、h 或您在代码中用于运行缩放图像的任何其他变量。由于 parent.parent 代码，它适用于轮播主 div，但您可以设置自己的容器。