Question

我的标题中有一个响应式图像滑块，但我希望它只在视口更改时展开宽度。固定高度居中的图像，在视口加宽时显示更多。有点像打开窗帘。这可能吗？尝试谷歌，但不知道如何正确地说出来。

我使用这个添加的代码来自bootstrap的轮播：

header{
    margin: 0;
    max-height: 507px;
    max-width: 1920px;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.25);
    border-bottom: 7px solid #9ccb43;
}

#header-carousel{
    width: 100%;
    margin: 0;
    max-height: 500px;
}

    .carousel-inner{
        max-height: 500px;
    }

和我的HTML：

<header>

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

            <h1>Isoleren Loont</h1>




            <div class="carousel-inner" role="listbox">

                <div class="item active">
                    <img src="images/static/carousel/carousel-4.jpg" alt="..."> 
                </div>

                <div class="item">
                    <img src="images/static/carousel/carousel-5.jpg" alt="...">

                </div>

                <div class="item">
                    <img src="images/static/carousel/carousel-6.jpg" alt="...">
                </div>

            </div>

        </div>

    </header>

Answer 1

正如我所说，是的，这是可能的。我做了很快的例子，但我相信，你可以改进这段代码

使用background-image

JSFiddle demo

是否可以仅扩展自适应图像的宽度？

1 个答案: