Question

我正在尝试制作3个<div>方框，其高度和宽度固定为500px;

我正在尝试拍摄3张不同的图片，让它们适合<div>框

我试图让图像偏离tumblr让我们说，或者imgur并且大多数图像都适合随机大小，但是有些图像不能伸展到<div>框的整个区域。

所以我有;

<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;

}

Answer 1

请勿直接将图片放入<div> 将其设置为背景图像，而不是设置background-size: cover;
这样，图像将拉伸以覆盖完整的<div>框，如您所愿。

Answer 2

如果您希望它占据其父级的100％，则需要将宽度：100％应用于您的img标记。

style="width:100%;"

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

http://jsfiddle.net/jGyr2/

这就是你要找的东西吗？

根据你的要求，它实际上听起来像这个小提琴演示了你想要的东西

http://jsfiddle.net/jGyr2/1/

修复div中的图像

2 个答案: