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

I am trying to create responsive images which can have different sizes. So far i am able to solve the common size issue with max-height, but the overlay is still a problem, hence it is filling the width of the column.

我正在尝试创建可以具有不同大小的响应式图像。到目前为止,我能够用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/

2 个解决方案

#1

Demo

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

This will solve your problem :)

这将解决你的问题:)

#2

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

This is a workaround with javascript. The only issue is that images have class image responsive that will make for images with 400x400 the overlay a little bigger.

这是一个使用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);
    });
});

#1