div中的bootstrap响应式图像

Question

基本上我需要的是： 3列（例如col-ms-4） 在每个列中我需要一个div 在div里面： div的上半部分是响应式图像，底部是

和

我无法使图像成为div的一半并且响应

 <div class="col-sm-4">
                <div class="service-box">
                    <img class="service-box-img img-responsive" src="something">
                    <h2>Header</h2>
                    sdfsdfdfdsfsdfdsfdf
                </div>
             </div>

css:

 .col-sm-4{
            padding-left:100px;
                padding-right:100px;
            height:300px;

        }
        .service-box{
            background-color:white;
            padding:30px;
            padding-left:100px;
        }
        .service-box-img{

            height:150px;
        }

Answer 1

尝试添加

.col-sm-4 img {
     width: 100%
}