在不同宽度div内的图像顶部划分

Question

我已开始使用响应式设计。目前，我遇到了在图像上添加带标题的div的问题。原因是这些图像具有不同的宽度，具体取决于屏幕尺寸。这些图像也在不同宽度的div内，具体取决于屏幕尺寸。

有没有办法在图像上使用一致的宽度标题div而不为每个媒体查询编写CSS？谢谢你的帮助。

HTML标记：

<a href="#">
    <div class="hidden-xs col-sm-3 buffer portfolio logo thumbnail-tall">
        <img class="img-responsive img-center" src="http://placekitten.com/260/430" alt="" />
        <div class="image-hover">
            <h3>Test Title</h3>
            <p>This is some descriptive text.</p>
        </div>
    </div>
</a>

CSS（Sass）：

div.portfolio{
    position: relative;
    div.image-hover{
        position: absolute;
        top:0;
        width: 90%; //This does not stay consistent for each media query and varying image widths
        height: 100%;
        background: rgb(0,0,0); // backwards compatibility for older browsers
        background: rgba(0,0,0,0.4);
        display: none;
        text-align: center;
        color: #fff;
        h3{ color: #fff; }
    }
}

div.portfolio:hover{
    div.image-hover{ 
        display: block;
        z-index: 100;
    }
}

实时测试网站页面：http://dai2.designangler.com/work