html - 使用图像自动填充容器 CSS Bootstrap

Question

我对 bootstrap 有点陌生，我正在尝试弄清楚如何用大小不同的图像填充容器。

目前我正在使用 background-image 标签，但我想将其更改为图像标签，如下所示:

<div class="col-lg-8 col-lg-push-2 overlay">
        <div class="container-fluid image-library">
            <div class="col-lg-4 image-container" style="background-image: url('media/placeholder/1.jpg');"></div>
            <div class="col-lg-4 image-container" style="background-image: url('media/placeholder/2.jpg');"></div>
            <div class="col-lg-4 image-container" style="background-image: url('media/placeholder/3.jpg');"></div>
        </div>
    </div>

还有 CSS:

    .image-container{
    height: 200px; 
    max-width:300px;
    outline: #FFFFFF solid; 
    background-position: center center; 
    background-size: cover;
    margin-left:auto;
    margin-right:auto;        
}

在那之后，我希望 Bootstrap 的专栏将其居中，但我似乎无法完成这项工作。

如有任何帮助，我们将不胜感激!

问候，

布拉姆

Answer 1

你试过添加

background-size:100%;
or
background-size:auto;

到您的 .image-container 类？