Question

我正在尝试创建3个水平对齐的背景图片，并且跨越浏览器的100% width，但最大高度为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属性。

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

1 个答案: