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'make'100％'，然后使窗口更长（垂直），则只显示#black部分没有图像。

或者我改变img的“min-height”make“100％”，然后广泛地（水平地）制作窗口，#black部分显示没有图像。

所以，我做了身高和高度调整大小时宽度为100％，然后图像拉伸。（但我不希望那种拉伸，因为它很丑ㅠㅠ）

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

我试图从该网站复制html（包括js文件），css代码。但我从中得不到任何想法。

（实际上，似乎在线友网站上有一点放大/缩小效果。但是我找不到对代码的影响。我认为我想要的效果可能不是高度或宽度的问题但是，如果你了解如何建立线下朋友的效果，请告诉我。）

感谢阅读！

Answer 1

如果您为幻灯片容器提供静态高度（可以使用height: calc(100%);，则可以使用background-image和background-size: cover;来显示调整大小时不会拉伸的图像。请参阅下面的代码：

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

调整大小窗口时，如何使图像更大，而不需要任何水平拉伸和放大垂直？

1 个答案: