Html 在div中固定图像

我正在尝试制作3个高度和宽度固定为500px的

盒子

我正在尝试拍摄3张不同的图像，并将它们放入

框中

我试着在tumblr上安装一个图像，比如说，imgur和大多数图像都适合随机大小，但有些图像无法拉伸整个

框

所以我有

<div class="row">
    <div class="col-md-4 portfolio-item">
        <div class="caption">
            <div class="caption-content">
                <i class="fa fa-search-plus fa-2x">tstmkr</i>
            </div>
        </div>
        <img src="http://goo.gl/2GDUPT" class="img-responsive" alt="" />
        <!-- </a> -->
     </div>
 </div>


#portfolio .portfolio-item .portfolio-link .caption .caption-content {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 20px;
    margin-top: -12px;
    text-align: center;
    font-size: 20px;
    color: #fff;
}

#portfolio .portfolio-item .portfolio-link .caption .caption-content i {
    margin-top: -12px;

}

tstmkr
#公文包。公文包项目。公文包链接。标题。标题内容{
位置：绝对位置；
最高：50%；
宽度：100%；
高度：20px；
边缘顶部：-12px；
文本对齐：居中；
字体大小：20px；
颜色：#fff；
}
#portfolio.portfolio item.portfolio link.caption.caption内容i{
边缘顶部：-12px；
}

不要直接将图像放入

中。
将其作为背景图像，然后设置

背景大小：封面

这样，图像将根据您的需要拉伸到整个
框。
如果您希望img标签占据其父标签的100%，则需要对其应用宽度：100%

style="width:100%;" 

或者给它一个id并在样式表中为它创建一个宽度：100%


这就是你要找的吗

根据你的要求，这把小提琴听起来像是你想要的东西