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