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类？

Answer 2

我正在使用img代码，因为你想转移它。

DEMO

HTML CODE

<div class="col-lg-8 col-lg-push-2 overlay">
    <div class="container-fluid image-library">
        <div class="col-lg-4 image-container" ><img src="http://logonoid.com/images/stack-overflow-logo.png"></div>
        <div class="col-lg-4 image-container" ><img src="http://logonoid.com/images/stack-overflow-logo.png"></div>
        <div class="col-lg-4 image-container"><img src="http://logonoid.com/images/stack-overflow-logo.png"></div>
    </div>
</div>

CSS代码

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

.image-container img{
    width: 100%;
    position: relative;
}

使用Image自动填充容器CSS Bootstrap

2 个答案: