title: Is it possible to have images auto-resize in a CSS grid while maintaining aspect ratio?
body: <p>For example this produces an image that fits it's container if the container has type block:</p>
  
  <pre><code>#image {
      max-height: 100%;
      max-width: 100%;
      width: auto;
      height: auto;
  }
  </code></pre>
  
  <p>However it doesn't work if the image is part of a grid that has fixed sized rows (here's <a href="https://plnkr.co/edit/6sTDFg4UcpyiSruwjvbg?p=preview" rel="nofollow noreferrer">a plunk</a> to see it in action) e.g.:</p>
  
  <pre><code>&lt;style&gt;
      #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;
      }
  &lt;/style&gt;
  
  &lt;div id="container"&gt;
      &lt;img class="image" src="http://via.placeholder.com/1366x768"&gt;
      &lt;img class="image" src="http://via.placeholder.com/1366x768"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In this example both images go outside of their box, I would've expected both images to behave like they were in individual containers like this:</p>
  
  <pre><code>#container {
      display: block;
      height: 80px;
  }
  </code></pre>
  
  <p>Basically my question is, is there a way I can style the images so that they can scale to fit any grid cell (regardless of whether the cell uses <code>auto</code> or fixed size) so that they automatically shrink to fit within the cell while also maintaining their aspect ratio (in the same way that they can shrink in the block container)?</p>