image底部有額外的空隙

<div className="em-goods-image">
      <img src={this.props.image}/>
</div>

使用了如下的CSS

.em-goods-image img {
  width: 100%;
}

顯示的時(shí)候如下

div跟圖片的高度并沒有一樣，div比圖片高。 這是由于image是inline element，瀏覽器在繪制的時(shí)候，默認(rèn)跟旁邊的文字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
}