使用CSS的响应式图像背景翻转

Question

我想在使用CSS3和bootstrap3的响应式图像上产生叠加效果。问题是翻转带来的叠加背景适用于边距，比图像本身大。

这里是我的html：

<div class="col-sm-6 col-md-4 col-lg-3"> 
    <figure> 
    <a href="#"> 
     <img class="img-responsive" src="img/portfolio/prw-4.jpg"> 
    </a> 
    </figure> 
</div> 

而CSS：

#portfolio figure a:after { 
    content:'Text'; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    transition: all 1s; 
    -webkit-transition: all 1s; 
    background: rgba(0,0,0,0.7); 
    color: #FFF; 
    text-align: center; 
    padding: 60px 0; 
} 
#portfolio figure a:hover:after { 
    opacity:1; 
} 

有没有人有一个建议？ 感谢

Answer 1

你可以考虑使用盒大小，因为你已经使用了“实验性”的CSS3 有一个很好的文章在这里：Box Sizing|CSS-Tricks

所以basicly地说：

* { 
    -moz-box-sizing: border-box; /* Firefox 1, probably can drop this */ 
    -webkit-box-sizing: border-box; /* Safari 3-4, also probably droppable */ 
    box-sizing:  border-box; /* Everything else */ 
} 

在你的CSS和那也许可能为你解决它。 祝你好运。