奇怪的浏览器行为：Img在调整大小时失去宽高比，重新获得刷新

Question

我正在创建一个水平的图像列表，其中包含随浏览器高度缩放的描述。描述是固定宽度的，图像保留其宽高比。这是我的代码：

HTML

<main>
  <ol id="projects">
  <li class="project">
      <div class="preview"><img src="http://placehold.it/40x40" /></div>
      <div class="desc"></div>
  </li><li class="project">
          <div class="preview"><img src="http://placehold.it/40x40" /></div>
      <div class="desc"></div>
  </li><li class="project">
      <div class="preview"><img src="http://placehold.it/40x40" /></div>
      <div class="desc"></div>
  </li><li class="project">
          <div class="preview"><img src="http://placehold.it/40x40" /></div>
      <div class="desc"></div>
  </li>
</ol>
</main>

CSS

html,body,main,#projects{
    height:100%;
}

#projects {
  width:1000px;
  float:left;
  overflow:visible;
  white-space:nowrap;
}

.project {
  height:100%;   
  display:inline-block;
}

.desc{
    background-color:#afa;
    float:right;
    width:10em;
    height:100%;
}

.preview{
    float:left;
    height:100%;
    width:auto;
}

.preview img{
    height:100%;
    min-width:10px;
}

此处the JSFiddle

首次加载页面时，图像的行为符合要求。但是，只要视口垂直调整大小，它们就会失去宽高比。但是，如果使用新视口尺寸重新加载页面，则图像会再次正常运行。见GIF：

这是我的错误，浏览器错误，还是两者的某种组合？有没有其他方法可以实现我的目标？