Javascript 我想在固定大小的div元素中使用纵横比填充图像滑块

我有几个不同大小的图像，我将使用这些图像制作图像滑块

我指的是

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

---

如何制作图像滑块，其中图像使用不同大小的图像进行纵横比填充？

链接到的幻灯片设置为以纵横比匹配模式显示。很难说这是真的，但是图像会根据其纵横比填充垂直和/或水平空间

JSSOR幻灯片有一个选项来定义图像的拟合方式，您链接到的示例设置为“Contain&Actual for Small Image”。这意味着它将使用

纵横比拟合

，除非图像太小，无法填充高度和/或宽度，并且它将使图像在幻灯片上居中

通过单击“”链接，然后单击“布局”并更改右侧的填充模式，可以更改图像的填充方式。默认情况下，它似乎被设置为

方面适合

，或“包含&实际用于小图像”。如果希望图像同时填充高度和宽度（这需要放大一些图像），可以选择

cover

。这将通过缩放和裁剪图像的部分，对每个图像进行分类，以填充整个幻灯片

---

有一天，我在这种情况下开发了类似的代码。 我知道我的代码不是一种很好的方式，但它运行了许多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>

事实上，我在代码中使用了。 然而，使用另一个是可以的，但是我认为如何使用这个几乎是一样的

---

谢谢。

谢谢你的回答。但我必须显示用户动态上传的图像。所以我不能逐个编辑每个图像。@Star\u Man，这个选项适用于所有图像，您不需要编辑任何图像。我必须制作纵横比填充图像滑块。但你的答案只提供了适合于方面的图像滑块。所有图像必须在fixed 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);
        }
    });