css - 如何制作 3 个水平响应式背景图片

Question

我正在尝试创建 3 个水平对齐的背景图像，并且跨越浏览器的 100% 宽度，但最大高度为 800px； 我也想要它们缩小响应。我正在使用 glorious bootstrap到目前为止，您看不到图像，因为它不是阅读高度。

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 属性。