带有不统一图片的 Twitter 引导轮播

Question

让我从很长的帖子开始，我很抱歉。 我正在尝试使用引导轮播，不幸的是，我得到的图片并不统一。例如，有些是 100x200，doe 是 150x100 等。纵横比不同，字母与横向。我尝试了很多事情，包括在轮播中加载我的每个图像时使用以下辅助函数：

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，图像会拉伸到左右边缘并垂直居中并在上方有字母框及以下，但容器不会改变，因此轮播的导航按钮不会移动。如果图像是 2:1，图像将拉伸到水平居中的顶部和底部，左右两侧有信箱，同样保持导航按钮不动。

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

你正在尝试做的事情很疯狂

Answer 1

...而且答案也有点长...

• 我假设宽度的图像的父级是一个常数，而您不更改宽度的视口必须保持不变。

A-. 获取宽度的图像的父级... （因为id属性我取了祖父的参数，也就是（必须）和父的一样）。

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

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

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

E-. 将幻灯片的图像位置设置为绝对位置（注意：这必须通过 JQuery，因为如果您在 Css 中执行此操作，则引导轮播将无法正确显示。我使用新类完成了对于图像（'myCarouselImgs'）。

• 引导轮播的事件“slide.bs.carousel”和“slid.bs.carousel”。

如您所知，在“点击”事件之后，slide.bs.carousel 事件是第一个暗示从当前幻灯片切换到下一张幻灯片的事件；而 'slid.bs.carousel' 是该过程的结束。

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

G-. 在第二个“slid.bs.carousel”中，获取图像的大小。为此，您需要识别隐含的图像。我给每个人一个ID。有了这个和上一步得到的值，就可以做到了。

H-. 好了，现在您已经有了 ScaleImage 函数所需的四个值。你可以叫它……

I-. … 并应用结果并产生一些效果

    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/ 看到它运行

Answer 2

快速而肮脏的解决方案是使用图像编辑器调整图像大小，并将适当大小的图像保存到名为 carousel_images 的文件夹中。然后，每当您获得新内容时，您只需通过编辑器运行图像。使用轮播时，您很可能会处理数个到数十个范围内的大量图像，而不是数百或数千个图像。

一个更复杂的解决方案是向您的图像提供商解释您需要所有尺寸的东西。如果您在运行过程中拉伸和倾斜图像，它们看起来不会正确，您可以向它们展示纵横比错误的图像来解释您的意思。

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

Answer 3

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