Question

首先，我很抱歉这篇长篇文章。我正在尝试使用自举旋转木马，不幸的是我给的图片并不统一。例如，一些是100x200，母鹿是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);" />

对于旋转木马中的FIRST图像来说效果很好，但是之后每个图像看起来都只是最终的自然尺寸并且是水平居中的，但它们只是对着旋转木马的最顶层。

我甚至更改了“onload”来传递图像长度和宽度的值，但这也没有用，在调试中似乎只有第一张图像才能启动“onload”事件。

我想要的效果是如果容器的比例是3：4并且图像的比例是1：2，则图像会拉伸以符合左右边缘并且将垂直居中并且上面有信箱以下，但容器不会改变，因此转盘的导航按钮不会移动。如果图像是2：1，图像将拉伸以满足水平居中的顶部和底部，左右有信箱，再次保持导航按钮不动。

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

你要做的就是疯狂

Answer 1

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

Answer 2

快速而肮脏的解决方案是使用图像编辑器调整图像大小，并将正确大小的图像保存到名为carousel_images的文件夹中。然后，无论何时获得新内容，您只需通过编辑器运行图像即可。使用旋转木马，您最有可能处理几个到几十个范围内的许多图像，而不是数百或数千个。

更复杂的解决方案是向您的图像提供商解释您需要一个尺寸的所有内容。如果你在飞行中伸展和歪斜它们，图像看起来不会正确，你可以向它们展示宽高比错误的图像来解释你的意思。

最后，作为一种技术解决方案，我会尝试找出为什么你的图像缩放器只在第一张图像上运行。从它的声音来看，其他图像并没有贯穿你的功能。我认为在这种情况下，技术解决方案应该是最后的手段，因为，就像我说的那样，最终结果不会那么好。如果可能，您应该至少手动处理每个图像，以确保结果足够。

Answer 3

...... 答案有点长......

•我假设宽度图像的父级是常量，而您不更改必须保留的宽度视口。

A - 。获取宽度图片的父级... （因为id属性我接受了祖父的参数，即（必须）与父父的参数相同）。

B - 。使用以下值推导出高度图像的父级，包括首选比率（在本例中为16x9 ......

C - 。 ...然后设置图像的父级高度集合（所有元素都带有class =“item”）。

D - 。为了保留轮播的响应特性，您必须将$ F_getAdjustImagesParents函数添加到窗口大小调整事件中。

E - 。将幻灯片的图片位置设置为绝对值（注意：必须通过JQuery，因为如果你在Css中这样做，bootstrap轮播将无法正确显示。我是用新的类做的对于图像（'myCarouselImgs'）。

•Bootstrap carousel的事件'slide.bs.carousel'和'slid.bs.carousel'。

如您所知，在“click”事件之后，slide.bs.carousel事件是暗示从当前幻灯片到下一张幻灯片的更改的第一个事件之一;而'slid.bs.carousel'就是这个过程的结束。

F - 。在第一个（slide.bs.carousel事件）中，使用Bootstrap插件的'relatedTarget'变量，项目的id属性和项目的数据属性，获取数字下一个项目（确保最后一个-id属性和数据属性存在）。

G - 。在第二个'slid.bs.carousel'中，获取图片的大小。为此，您需要识别隐含的图像。我给了每个人一个身份证。有了这个以及在previus步骤中获得的值，它就可以做到。

H - 。好了，现在您已经拥有了ScaleImage函数所需的四个值。你可以称之为......

我 - 。 ...然后应用效果

    var $parentImgW = ' '
    var $parentImgH = ' ';
    var $myCarousel = $('#myCarousel')
    var $carouseItems =  $('.item');
    function $F_getAdjustImagesParents(){
       $parentImgW = $myCarousel.width(); // A
       $parentImgH =  ($parentImgW*9)/16; // B
       $carouseItems.height($parentImgH+'px').css('max-height',$parentImgH+'px'); //C
       console.log('$parentImgW ====> '+$parentImgW);
       console.log('$parentImgH ====> '+$parentImgH)
    };
   $F_getAdjustImagesParents();

   $(window).on('resize',function(){  // D
        $F_getAdjustImagesParents();
   });

   $('.myCarouselImgs').css('position','absolute'); // E


   $myCarousel.on('slide.bs.carousel', function(event) {// The slide’s change process starts
       var $slideNum = $("#"+event.relatedTarget.id).data('slide_num'); // F
       console.log('$lideNum ====> '+$slideNum)
       $myCarousel.on('slid.bs.carousel', function(event) {//The slide’s change process ends
          var $imgW = $('#myCarouselSlideImage'+$slideNum).width(); //G
          var $imgH = $('#myCarouselSlideImage'+$slideNum).height(); //G
          console.log('$imgW ====> '+$imgW);
          console.log('$imgH ====> '+$imgH);
          var $result = ''; 
          $result = ScaleImage($imgW, $imgH, $parentImgW, $parentImgH, true); //H
          console.log('$result.width ====> '+$result.width);
          console.log('$result.height ====> '+$result.height);
          console.log('$result.targetleft ====> '+$result.targetleft);
          console.log('$result.targettop ====> '+$result.targettop);
          $('#myCarouselSlideImage'+$slideNum).animate({ // I
                              width:$result.width+'px',
                              height:$result.height+'px',
                              left:$result.targetleft+'px',
                              top:$result.targettop+'px' },
                                       300);
       });
   });

通过 https://jsfiddle.net/nd90r1ht/57/或https://jsfiddle.net/omarlin25/nd90r1ht/59/

查看运行情况

Twitter bootstrap轮播与不均匀的图片

3 个答案: