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

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

演示：https://jsfiddle.net/prp794Lb/5/

Answer 1

Demo

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

这将解决您的问题:)

Answer 2

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

这是 javascript 的解决方法。唯一的问题是图像具有 class 图像响应，这将使 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 根据图像大小调整叠加层

How to adjust overlay according to image size with bootstrap

html

css

twitter-bootstrap-3