我想要在固定大小的div元素中使用Aspect-Fill Image Slider

Question

我有几张不同尺寸的图片，我将使用这些图片制作图片滑块。

我指的是this document。

但是在这个库中，图像是div元素的方面。

如何制作使用各种尺寸图像对图像进行纵横填充的图像滑块？

Answer 1

您链接的幻灯片设置为以纵横比模式显示。很难说这种情况正在发生，但图像是根据纵横比填充垂直和/或水平空间的。

JSSOR幻灯片有一个选项来定义图像如何适合，并且您链接到的示例设置为'包含实际用于小图像的&'。这意味着它会使用aspect-fit，除非图像太小而无法填充高度和/或宽度，并且会将图像置于幻灯片上。

您可以通过点击'Edit This Slider'链接，然后点击'布局'并更改右侧的填充模式来更改图像的适合方式。默认情况下，它似乎设置为aspect-fit，或'包含&实际用于小图像'。如果您想要图像填充高度和宽度（需要放大某些图像），则可以选择cover。这将通过缩放和裁剪图像的一部分来使每张图像填满整张幻灯片。

Answer 2

有一天，我在这样的情况下，开发出了类似的代码。 我知道我的代码不是一个好方法，但它运行许多JavaScript代码，因此可能会导致性能问题。 这是我的试用代码。我也想帮你一点。

HTML

<div class="swiper-container thumbnails-preview" data-autoplay="0" data-loop="1" 
    data-speed="500" data-center="0" data-slides-per-view="1"> 
    <div class="swiper-wrapper"> 
     <div class="swiper-slide active" data-val="0"> 
      <div class="img_content"> 
        <img class="img-responsive" src="img_url"alt=""> 
        <img class="img-responsive" src="img_url"alt=""> 
        ... 
      </div> 
     </div> 
     <div class="pagination pagination-hidden poin-style-1"></div> 
       <div class="arr-t-3"> 
        <div class="swiper-arrow-left sw-arrow"><span class="fa fa-angle-left" style="left: 10px"></span></div> 
        <div class="swiper-arrow-right sw-arrow"><span class="fa fa-angle-right" style="right: 10px"></span> 
       </div> 
     </div> 
    </div> 
</div> 

的Javascript

$(".img_content").each(function() { 

     var parentWidth = $(this).width(); 
     var parentHeight = parentWidth * 0.7; 

     $(this).css("height", parentHeight); 
     $(this).css("overflow", "hidden"); 

     var target = $(this).children('img'); 
     var width = target.width(); 
     var height = target.height(); 

     var ratioXY = 0.5; 

     var imgW = $(this).children('img').width(); 
     var imgH = $(this).children('img').height(); 


     //block size 
     var block_width = $(this).closest(".swiper-container").width(); 
     var block_height = block_width * ratioXY; 

     //image ratio 
     var ratio = imgH/imgW; 

     //image block size 
     $(this).css("width", block_width); 
     $(this).css("height", block_height); 
     $(this).css("overflow", "hidden"); 

     if (ratio > ratioXY) { 
      $(this).children('img').css("width", "100%"); 
      var gap = (imgH * block_width/imgW - block_height)/2; 
      $(this).children('img').css("margin-top", -gap); 
     } 
     else { 
      $(this).children('img').css("height", "100%"); 
      $(this).children('img').css("max-width", 100/ratio + "%"); 
      var gap = (imgW * block_height/imgH - block_width)/2; 
      $(this).children('img').css("margin-left", -gap); 
     } 
    }); 

由于事实上，我在我的代码中使用idangerous swiper。 但是，可以使用另一个，但我认为如何使用几乎与此相同。

谢谢。