css實現圖片按寬等比例縮放不變形

<div id='evalPage '>
  <div class='imgbox'>
    <img class='image__inner' src='http://https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg' />
  </div>
</div>

#evalPage .imgbox{
  width: 20%;
  height:0; //容器內有內容，所以要將height設為0
  padding-bottom: 20%; //這裡和寬值一樣
  overflow: hidden;
  position: relative;
}
#evalPage .imgbox .image__inner{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}