我想在固定大小的 div 元素中填充图像滑块答案

【问题标题】：I want to Aspect-Fill Image Slider in fixed sized div element我想在固定大小的 div 元素中填充图像滑块
【发布时间】：2017-07-23 11:26:29
【问题描述】：

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

我指的是this document。

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

如何使用不同尺寸的图像制作图像滑块，其中图像被填充？

【问题讨论】：

标签： javascript html image css slider

【解决方案1】：

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

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

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

【讨论】：

感谢您的回答。但我必须显示用户动态上传的图像。所以我不能一张一张地编辑每张图片。
@Star_Man，此选项适用于所有图像，您无需编辑任何图像。
我必须制作宽高比的图像滑块。但是您的答案仅制作了适合纵横比的图像滑块。所有图像必须完全填充在固定 div 元素中，没有填充。
您是否尝试过其他选项并预览更改？
这个滑块有关于滑动图像的静态数据。但是我必须显示用户上传的任何图像，所以我不能包含任何图像数据。

【解决方案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。不过用别的也可以，不过我觉得用法和这个差不多。

谢谢。

【讨论】：

您的代码运行良好，但还有其他问题吗？当我必须一次显示很多图像时，使用您的方式可能会出现 javascript 性能错误。
我很高兴我的代码运行良好。我知道那个问题。我也想学别的方法。