javascript - 由于图像大小不同，带有幻灯片的 slider 会自行调整大小

Question

当尝试使用 rslides js 插件时，我遇到了这个烦人的问题。我希望通过链接将图像导入网站，这意味着我无法调整它们的大小，但 slider 处理得相当差；它扩大了。现在， slider 是响应式的，它随页面宽度缩放。一种解决方案可能是为大小设置静态值，但我宁愿不这样做，因为它可能会破坏响应式 %scaling。

编辑:忘记链接网站 http://208.69.30.150/build/age_past.html

评论中的一些澄清:

图像在 slider 内调整大小。但是 slider 正在调整某些图像的大小，只是在高度上，这是因为图像的宽高比并不完全相同。所以我想调整图像的宽度，如果高度溢出，我想裁剪掉溢出的部分。

CSS

/*SLIDER*/
.slider{
    background-color: #222;
}
.rslides_container {
    position: relative;
    margin: 50px auto;
    width: 100%;
    background: #222;
}
    .slider .slider_medium{
        max-width: 900px;
    }
.rslides {
    border-radius:200px;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0 auto;
}

.rslides li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
}

.rslides li:first-child {
    position: relative;
    display: block;
    float: left;
}

.rslides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0;
}
/*SLIDER OVERLAY IMAGES*/
    #banner_image_1 img{
        position: absolute;
        z-index: 5;
        top: 10%;
        left: 3%;
        height:auto; 
        width:auto; 
        max-height: 100px; 
        background: #FFF;
    }
    #banner_image_2 img{
        position: absolute;
        z-index: 5;
        bottom: 3%;
        right: 1%;
        height: 20%;  
        max-height:60px;
    }
    #banner_image_3 img{
        position: absolute;
        z-index: 5;
        bottom: 3%;
        right: 7%;
        height: 20%;  
        max-height:60px;
    }

HTML

<div class="block slider">
              <div class="rslides_container slider_medium">
                <!--<a id="banner_image_1" href="" target="">
                  <img src="">
                </a>-->
                <ul class="rslides">
                  <li>
                    <a href="http://www.agepast.com/">
                      <img src="http://fc00.deviantart.net/fs70/i/2010/194/2/5/Age_Past_Wallpaper_by_Tsabo6.jpg"/>
                    </a>
                  </li>
                  <li>
                    <a href="http://www.agepast.com/">
                      <img src="http://fc03.deviantart.net/fs71/i/2011/211/c/6/age_past_by_tsabo6-d424m3v.jpg"/>
                    </a>
                  </li>  
                  <li>
                    <a href="http://www.agepast.com/">
                      <img src="http://fc00.deviantart.net/fs70/i/2010/257/7/e/age_past_earth_magic_by_tsabo6-d2yp0v0.jpg"/>
                    </a>
                  </li>
                  <li>
                    <a href="http://www.agepast.com/">
                      <img src="http://fc01.deviantart.net/fs71/i/2010/244/8/2/age_past_wall_2_by_tsabo6-d2xr9g0.jpg"/>
                    </a>
                  </li>
                </ul>
              </div>
                <script>
                  $(function() {
                    $(".rslides").responsiveSlides({
                      auto: true, speed: 1500, timeout: 5000, pause: true,
                    });
                  });
                </script>
            </div>

& 大量 JS(只是格式不正确。)

(function ($, window, i) {

$.fn.responsiveSlides = 函数(选项){

// Default settings
var settings = $.extend({
  "auto": true,             // Boolean: Animate automatically, true or false
  "speed": 500,             // Integer: Speed of the transition, in milliseconds
  "timeout": 4000,          // Integer: Time between slide transitions, in milliseconds
  "pager": false,           // Boolean: Show pager, true or false
  "nav": false,             // Boolean: Show navigation, true or false
  "random": false,          // Boolean: Randomize the order of the slides, true or false
  "pause": false,           // Boolean: Pause on hover, true or false
  "pauseControls": true,    // Boolean: Pause when hovering controls, true or false
  "prevText": "Previous",   // String: Text for the "previous" button
  "nextText": "Next",       // String: Text for the "next" button
  "maxwidth": "",           // Integer: Max-width of the slideshow, in pixels
  "navContainer": "",       // Selector: Where auto generated controls should be appended to, default is after the <ul>
  "manualControls": "",     // Selector: Declare custom pager navigation
  "namespace": "rslides",   // String: change the default namespace used
  "before": $.noop,         // Function: Before callback
  "after": $.noop           // Function: After callback
}, options);

return this.each(function () {

  // Index for namespacing
  i++;

  var $this = $(this),

    // Local variables
    vendor,
    selectTab,
    startCycle,
    restartCycle,
    rotate,
    $tabs,

    // Helpers
    index = 0,
    $slide = $this.children(),
    length = $slide.size(),
    fadeTime = parseFloat(settings.speed),
    waitTime = parseFloat(settings.timeout),
    maxw = parseFloat(settings.maxwidth),

    // Namespacing
    namespace = settings.namespace,
    namespaceIdx = namespace + i,

    // Classes
    navClass = namespace + "_nav " + namespaceIdx + "_nav",
    activeClass = namespace + "_here",
    visibleClass = namespaceIdx + "_on",
    slideClassPrefix = namespaceIdx + "_s",

    // Pager
    $pager = $("<ul class='" + namespace + "_tabs " + namespaceIdx + "_tabs' />"),

    // Styles for visible and hidden slides
    visible = {"float": "left", "position": "relative", "opacity": 1, "zIndex": 2},
    hidden = {"float": "none", "position": "absolute", "opacity": 0, "zIndex": 1},

    // Detect transition support
    supportsTransitions = (function () {
      var docBody = document.body || document.documentElement;
      var styles = docBody.style;
      var prop = "transition";
      if (typeof styles[prop] === "string") {
        return true;
      }
      // Tests for vendor specific prop
      vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
      prop = prop.charAt(0).toUpperCase() + prop.substr(1);
      var i;
      for (i = 0; i < vendor.length; i++) {
        if (typeof styles[vendor[i] + prop] === "string") {
          return true;
        }
      }
      return false;
    })(),

    // Fading animation
    slideTo = function (idx) {
      settings.before(idx);
      // If CSS3 transitions are supported
      if (supportsTransitions) {
        $slide
          .removeClass(visibleClass)
          .css(hidden)
          .eq(idx)
          .addClass(visibleClass)
          .css(visible);
        index = idx;
        setTimeout(function () {
          settings.after(idx);
        }, fadeTime);
      // If not, use jQuery fallback
      } else {
        $slide
          .stop()
          .fadeOut(fadeTime, function () {
            $(this)
              .removeClass(visibleClass)
              .css(hidden)
              .css("opacity", 1);
          })
          .eq(idx)
          .fadeIn(fadeTime, function () {
            $(this)
              .addClass(visibleClass)
              .css(visible);
            settings.after(idx);
            index = idx;
          });
      }
    };

  // Random order
  if (settings.random) {
    $slide.sort(function () {
      return (Math.round(Math.random()) - 0.5);
    });
    $this
      .empty()
      .append($slide);
  }

  // Add ID's to each slide
  $slide.each(function (i) {
    this.id = slideClassPrefix + i;
  });

  // Add max-width and classes
  $this.addClass(namespace + " " + namespaceIdx);
  if (options && options.maxwidth) {
    $this.css("max-width", maxw);
  }

  // Hide all slides, then show first one
  $slide
    .hide()
    .css(hidden)
    .eq(0)
    .addClass(visibleClass)
    .css(visible)
    .show();

  // CSS transitions
  if (supportsTransitions) {
    $slide
      .show()
      .css({
        // -ms prefix isn't needed as IE10 uses prefix free version
        "-webkit-transition": "opacity " + fadeTime + "ms ease-in-out",
        "-moz-transition": "opacity " + fadeTime + "ms ease-in-out",
        "-o-transition": "opacity " + fadeTime + "ms ease-in-out",
        "transition": "opacity " + fadeTime + "ms ease-in-out"
      });
  }

  // Only run if there's more than one slide
  if ($slide.size() > 1) {

    // Make sure the timeout is at least 100ms longer than the fade
    if (waitTime < fadeTime + 100) {
      return;
    }

    // Pager
    if (settings.pager && !settings.manualControls) {
      var tabMarkup = [];
      $slide.each(function (i) {
        var n = i + 1;
        tabMarkup +=
          "<li>" +
          "<a href='#' class='" + slideClassPrefix + n + "'>" + n + "</a>" +
          "</li>";
      });
      $pager.append(tabMarkup);

      // Inject pager
      if (options.navContainer) {
        $(settings.navContainer).append($pager);
      } else {
        $this.after($pager);
      }
    }

    // Manual pager controls
    if (settings.manualControls) {
      $pager = $(settings.manualControls);
      $pager.addClass(namespace + "_tabs " + namespaceIdx + "_tabs");
    }

    // Add pager slide class prefixes
    if (settings.pager || settings.manualControls) {
      $pager.find('li').each(function (i) {
        $(this).addClass(slideClassPrefix + (i + 1));
      });
    }

    // If we have a pager, we need to set up the selectTab function
    if (settings.pager || settings.manualControls) {
      $tabs = $pager.find('a');

      // Select pager item
      selectTab = function (idx) {
        $tabs
          .closest("li")
          .removeClass(activeClass)
          .eq(idx)
          .addClass(activeClass);
      };
    }

    // Auto cycle
    if (settings.auto) {

      startCycle = function () {
        rotate = setInterval(function () {

          // Clear the event queue
          $slide.stop(true, true);

          var idx = index + 1 < length ? index + 1 : 0;

          // Remove active state and set new if pager is set
          if (settings.pager || settings.manualControls) {
            selectTab(idx);
          }

          slideTo(idx);
        }, waitTime);
      };

      // Init cycle
      startCycle();
    }

    // Restarting cycle
    restartCycle = function () {
      if (settings.auto) {
        // Stop
        clearInterval(rotate);
        // Restart
        startCycle();
      }
    };

    // Pause on hover
    if (settings.pause) {
      $this.hover(function () {
        clearInterval(rotate);
      }, function () {
        restartCycle();
      });
    }

    // Pager click event handler
    if (settings.pager || settings.manualControls) {
      $tabs.bind("click", function (e) {
        e.preventDefault();

        if (!settings.pauseControls) {
          restartCycle();
        }

        // Get index of clicked tab
        var idx = $tabs.index(this);

        // Break if element is already active or currently animated
        if (index === idx || $("." + visibleClass).queue('fx').length) {
          return;
        }

        // Remove active state from old tab and set new one
        selectTab(idx);

        // Do the animation
        slideTo(idx);
      })
        .eq(0)
        .closest("li")
        .addClass(activeClass);

      // Pause when hovering pager
      if (settings.pauseControls) {
        $tabs.hover(function () {
          clearInterval(rotate);
        }, function () {
          restartCycle();
        });
      }
    }

    // Navigation
    if (settings.nav) {
      var navMarkup =
        "<a href='#' class='" + navClass + " prev'>" + settings.prevText + "</a>" +
        "<a href='#' class='" + navClass + " next'>" + settings.nextText + "</a>";

      // Inject navigation
      if (options.navContainer) {
        $(settings.navContainer).append(navMarkup);
      } else {
        $this.after(navMarkup);
      }

      var $trigger = $("." + namespaceIdx + "_nav"),
        $prev = $trigger.filter(".prev");

      // Click event handler
      $trigger.bind("click", function (e) {
        e.preventDefault();

        var $visibleClass = $("." + visibleClass);

        // Prevent clicking if currently animated
        if ($visibleClass.queue('fx').length) {
          return;
        }

        //  Adds active class during slide animation
        //  $(this)
        //    .addClass(namespace + "_active")
        //    .delay(fadeTime)
        //    .queue(function (next) {
        //      $(this).removeClass(namespace + "_active");
        //      next();
        //  });

        // Determine where to slide
        var idx = $slide.index($visibleClass),
          prevIdx = idx - 1,
          nextIdx = idx + 1 < length ? index + 1 : 0;

        // Go to slide
        slideTo($(this)[0] === $prev[0] ? prevIdx : nextIdx);
        if (settings.pager || settings.manualControls) {
          selectTab($(this)[0] === $prev[0] ? prevIdx : nextIdx);
        }

        if (!settings.pauseControls) {
          restartCycle();
        }
      });

      // Pause when hovering navigation
      if (settings.pauseControls) {
        $trigger.hover(function () {
          clearInterval(rotate);
        }, function () {
          restartCycle();
        });
      }
    }

  }

  // Max-width fallback
  if (typeof document.body.style.maxWidth === "undefined" && options.maxwidth) {
    var widthSupport = function () {
      $this.css("width", "100%");
      if ($this.width() > maxw) {
        $this.css("width", maxw);
      }
    };

    // Init fallback
    widthSupport();
    $(window).bind("resize", function () {
      widthSupport();
    });
  }

});

};})(jQuery, 这个, 0);

Answer 1

我认为您可以将 width: auto; 和 overflow: hidden 添加到您的 slider 容器中