是否可以在保持高宽比的同时在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等）和使用性能背景大小：盖; 重要的是图像输入一些类型的图像时，规模将打破，你需要规模