Chrome中的图像歪斜问题

我有一个高度为100％和宽度为auto的图像。它应该永远是方形的，永远不会倾斜。如果您调整浏览器的大小以使网站较低，则图像会发生偏斜。歪斜时，您可以打开检查器并取消选中高度100％，然后重新检查并将图像恢复为正方形。Chrome中的图像歪斜问题

<html> 
    <body> 
     <div id=outer style='height:100vh'> 
      <div style='height:50%'> 
       <img style='height:100%;' src='https://i.pinimg.com/236x/0f/9a/36/0f9a36457c046fe12c2c69ad60a3e737--creative-thinking-texture.jpg' /> 
      </div> 
     </div> 
    </body> 
</html>

https://jsfiddle.net/auey41fd/

这是真的搞乱了我的网站的Chrome用户。有没有人知道一个很好的解决办法？它不仅发生在用户调整浏览器大小时。任何时候外部容器变得不那么高，内部的图像就会歪斜。它不是专用于使用vh单元。一切工作正常在Firefox和IE浏览器。

来源

2017-10-05 Curtis