javascript - 调整窗口大小时，如何在不进行水平和垂直拉伸(stretch)的情况下使图像变大？

Question

每当我调整窗口大小时，一些空间没有填充我编码插入的图像。实际上，我曾多次尝试使用多种方法来处理这个问题。

这是我的部分代码。 (我使用 jquery、jquery-ui 和 bootstrap)

HTML

<div id="carouselSection" class="carousel slide" data-ride="carousel">

<!-- Indicators are skipped -->

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">

    <div class="item active">
        <div class="carouselImage">
            <div id="black">
                <img src="img/carousel_img_opt/slide_001.png">
            </div>
        </div>
    </div>
</div>

CSS

.carouselSection {
    height: 100%;
    width: 100%;
}

#black {
    width:100%;
    height:auto;
    background: rgba(0, 0, 0, 0.7); /* for darkening */
    position:absolute;
    top:0;
    left:0;
    background-image: url('bg_dim.png'); /* for checkered */
    background-repeat: repeat;
    z-index:10;
}

.carousel-inner .carouselImage img {
    /*position:absolute;*/
    width: 100%;
    height: auto;
    top:0;
    opacity: 0.5;
    background-size: cover;
    background-position: center center;
}

我做了这个功能来调整轮播部分(当然包括图像)到窗口的大小。

function resizeCarousel(){
    $('#carouselSection').css('height', $(window).height());
    $('.carouselImage, #black').css('height', $(window).height());
    // $('.carouselImage img').css({'top': 'auto', 'left': 'auto', 'min-width': '100%'});
}

评论部分有问题。

如果我更改 .carouselImage img 的 css“min-width”使“100%”，然后使窗口更长(垂直)，只需 #black部分显示无图像。

或者我将 img 的“最小高度”更改为“100%”，然后使窗口变宽(水平)，#black 部分显示没有图像。

因此，我在调整大小时将高度和宽度都设置为 100%，然后图像进行拉伸(stretch)。 (但我不想要那种拉伸(stretch)，因为它很难看ㅠㅠ)

有人知道如何处理这个问题吗？ 实际上，我想要这种效果(旋转木马幻灯片中的主要图像)在 https://www.linefriends.com/ .

我试图从该网站复制 html(包括 js 文件)、css 代码。但我没有从中得到任何想法。

(其实在linefriends的网站上好像有一点放大/缩小的效果，但是我在代码中没有找到那个效果。我想我想要的效果可能不是高度或宽度的问题. 但是，如果你知道如何构建 linefriends 的效果，请告诉我。)

感谢阅读!

Answer 1

如果你给你的幻灯片容器一个静态高度(你可以使用height: calc(100%);，你可以使用background-image和background -size: cover; 显示调整大小时不拉伸(stretch)的图像。请参见下面的代码:

<div class="item active">
    <div class="carouselImage" style="background-image: url('img/carousel_img_opt/slide_001.png');>
        <div id="black">
        </div>
    </div>
</div>