是否可以在保持高寬比的同時在CSS網格中自動調整圖像大小？

Question

例如這將產生一個適合它的容器，如果容器具有類型塊的圖像：

#image { 
    max-height: 100%; 
    max-width: 100%; 
    width: auto; 
    height: auto; 
} 

然而，如果圖像是已經固定大小的行的網格的一部分它不工作（這裏是a plunk看它在行動），例如：

<style> 
    #container { 
     display: grid; 
     grid-auto-columns: 0.3fr; 
     grid-auto-rows: 80px; 
    } 

    .image { 
     border: 1px solid black; 
     max-width: 100%; 
     max-height: 100%; 
     height: auto; 
     width: auto; 
    } 

    .image:nth-child(1) { 
     grid-column: 1; 
     grid-row: 1; 
    } 

    .image:nth-child(2) { 
     grid-column: 1; 
     grid-row: 2; 
    } 
</style> 

<div id="container"> 
    <img class="image" src="http://via.placeholder.com/1366x768"> 
    <img class="image" src="http://via.placeholder.com/1366x768"> 
</div> 

在這個例子中兩個圖像去他們的框框，我會一直期待這兩個圖像表現得像他們在單獨的容器是這樣的：

#container { 
    display: block; 
    height: 80px; 
} 

基本上我的問題是，有沒有一種方法，我可以風格的圖像，使他們能夠擴展以適應任何網格單元（不管細胞是否使用auto或固定大小），讓他們自動收縮以適應單元格，而內還保持它們的縱橫比（與它們可以在塊容器中收縮的方式相同）？

Answer 1

圖像矢量這似乎是一個Chrome bug而不是東西，我做錯了與max-height所以有沒有這方面的進一步行動。

Answer 2

我認爲你需要使用的圖像類型（如PNG等）和使用性能背景大小：蓋; 重要的是圖像輸入一些類型的圖像時，規模將打破，你需要規模