Question

我添加了一个白色背景来显示它的位置。如何删除额外的3px？我不想将高度设置为特定量，因为我希望它与比例和比例（最大值为400x250px）。目前高度为253像素，我希望它的图像大小为250像素。

HTML：

<div class="portfolio">
    <figure class="entry">
        <img src="http://www.robertfikesiv.com/images/Gallery/Graphic/thumb/Bad-Panda2.jpg"/>
        <div class="hover">TEST</div>
    </figure>
</div>

CSS：

body{
    background: #000;
}

.portfolio{
    padding: 0px 10px 0px;
    margin: auto;
    max-width: 1600px;
    overflow: hidden;
}

.figure{
    margin: 0px;
    padding: 0px;
}

.entry{
    position:relative;
    float:left;
    cursor: pointer;
    background: #fff;
    padding: 0px;
    margin: 0px;
    max-width: 400px;
}

.hover { 
    background:rgba(0,0,0,.9) ; 
    position:absolute; 
    top:0px; 
    left:0px; 
    bottom:0px; 
    right:0px; 
    opacity:0; 
    -webkit-transition:all .2s ease-out; 
    -moz-transition:all .2s ease-out; 
    -ms-transition:all .2s ease-out; 
    -o-transition:all .2s ease-out; 
    transition:all .2s ease-out; 
} 

.entry:hover .hover{
    opacity: 1;
} 

figure > div {
    padding-top:25%;
    text-align: center;
    color:#fff;
}

Answer 1

您的图片是inline。因此它与基线一致。因此白色空间。杀死这个空间的许多方法有：

vertical-align:middle你的形象。小提琴：http://jsfiddle.net/abhitalks/e2odqw5u/10/
display: block你的形象。小提琴：http://jsfiddle.net/abhitalks/e2odqw5u/11/
font-size: 0px;位于figure和font-size: npx div上。小提琴：http://jsfiddle.net/abhitalks/e2odqw5u/12/

Answer 2

只需将display: block添加到img：

即可

.entry img{
  display: block;
}

FIDDLE

额外的3px来自哪里？

2 个答案: