image底部有额外的空隙
<div className="em-goods-image">
<img src={this.props.image}/>
</div>
使用了如下的CSS
.em-goods-image img {
width: 100%;
}
显示的时候如下
div跟图片的高度并没有一样，div比图片高。 这是由于image是inline element，浏览器在绘制的时候，默认跟旁边的文字baseline对齐（即使旁边没有文字），所以底部有空隙。 具体inline element的绘制可以参考http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
解决方法
一种是用vertical-align
.em-goods-image img {
width: 100%;
vertical-align: bottom
}
另外一种是把image变成block
.em-goods-image img {
width: 100%;
display: block
}
网友评论