如何制作 3 个水平的响应式背景图像

Question

我正在尝试创建 3 个水平对齐的背景图像，跨越浏览器的100% width，但最大高度为800px;，我还希望它们缩小响应。我正在使用glorious bootstrap 到目前为止，您看不到图像 b/c 它不是阅读高度。

HTML

<div class="row">
        <div class="col-xs-4 col-md-4" style="margin:0 !important; padding:0 !important">
            <a href="mysite">
                <div class="casestudy-panel" style="background: url(myimage.jpg );"></div>
            </a>
        </div>
       <div class="col-xs-4 col-md-4" style="margin:0 !important; padding:0 !important">
            <a href="mysite">
                <div class="casestudy-panel" style="background: url(myimage.jpg );"></div>
            </a>
        </div>
        <div class="col-xs-4 col-md-4" style="margin:0 !important; padding:0 !important">
            <a href="mysite">
                <div class="casestudy-panel" style="background: url(myimage.jpg );"></div>
            </a>
        </div>
    </div>
</div>

CSS

    .casestudy-panel{
        max-width:100%;
        height: auto;
    }
    .casestudy-panel img {
        max-width:100%;
        height: 100%;
        -webkit-background-size: cover !important;
       -moz-background-size: cover!important;
        background-size: cover!important;
       -o-background-size: cover!important; 

}

Answer 1

由于您将图像用作背景，因此浏览器不会知道高度。您可以自己设置高度，但这不会保持纵横比。您可能必须为此使用填充比率技巧。见这里https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/ 否则，也许你可以将类casestudy-panel的div变成img标签，并将url设置为src属性。