Question

我正在尝试创建可以具有不同大小的响应式图像。到目前为止，我能够使用max-height解决常见的大小问题，但覆盖仍然是一个问题，因此它填充了列的宽度。

HTML

<div class="container">
    <div class="row team-images">
        <div class="col-sm-3">
            <div class="team-item">
                <div class="team-image-overlay"></div>
                <img src="http://placehold.it/400x300" class="img-responsive" alt="" />
            </div>
        </div>
        <div class="col-sm-3">
            <div class="team-item">
                <div class="team-image-overlay"></div>
                <img src="http://placehold.it/400x300" class="img-responsive" alt="" />
            </div>
        </div>
        <div class="col-sm-3">
            <div class="team-item">
                <div class="team-image-overlay"></div>
                <img src="http://placehold.it/400x300" class="img-responsive" alt="" />
            </div>
        </div>
        <div class="col-sm-3">
            <div class="team-item">
                <div class="team-image-overlay"></div>
                <img src="http://placehold.it/400x300" class="img-responsive" alt="" />
            </div>
        </div>
        <div class="col-sm-3">
            <div class="team-item">
                <div class="team-image-overlay"></div>
                <img src="http://placehold.it/400x400" class="img-responsive" alt="" />
            </div>
        </div>
        <div class="col-sm-3">
            <div class="team-item">
                <div class="team-image-overlay"></div>
                <img src="http://placehold.it/400x400" class="img-responsive" alt="" />
            </div>
        </div>
        <div class="col-sm-3">
            <div class="team-item">
                <div class="team-image-overlay"></div>
                <img src="http://placehold.it/400x300" class="img-responsive" alt="" />
            </div>
        </div>
    </div>
</div>

CSS

 body {
    margin: 10px;
}
.team-images .team-item {
    position: relative;
}
.team-images img {
    width: auto;
    max-height: 100px;
    margin: 0 0 15px;
}
.team-images .team-image-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41, 128, 185, 0.4);
    color: #fff;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;
}
.team-images .team-image-overlay:hover {
    background: rgba(24, 188, 156, 0);
}

DEMO：https://jsfiddle.net/prp794Lb/5/

Answer 1

CherryPy

.team-item {
    display:inline-block;
    background:red;
    margin-bottom:10px;
}

这将解决您的问题：）

Answer 2

https://jsfiddle.net/prp794Lb/8/

这是一个使用javascript的解决方法。唯一的问题是图像具有类图像响应，这将使400x400的图像覆盖更大。

$(".team-item").each(function(){
    var width = $(this).find("img").width();
    $(".team-image-overlay").width(width);
    var height = $(this).find("img").height();
    $(".team-image-overlay").height(height);
});
$( window ).resize(function() {
    $(".team-item").each(function(){
        var width = $(this).find("img").width();
        $(".team-image-overlay").width(width);
        var height = $(this).find("img").height();
        $(".team-image-overlay").height(height);
    });
});

如何使用bootstrap根据图像大小调整叠加

2 个答案: