title: Image not resizing relative to its parent
body: <p>I have a contain which is just a Grid based container looking something like:</p>
  <pre><code>.container {
      display: grid;
      grid-template-rows: auto 1fr;
  }
  </code></pre>
  <p>This container is a child container to a parent, which basically has a <code>height: 100%</code> where the true height is defined by another parent, which is set to the height of the screen minus some padding. So in some way a fixed viewport depending on screen size. I understand that if I don't use <code>overflow: auto</code> or something on my <code>container</code> or the others, if enough items are put into e.g. the container it will eventually expand to more than the intended size. However, since the item that is put in the <code>1fr</code> grid of the <code>container</code>, I actually just thought that images would contain themselves, since they can pretty much scale as much as possible.</p>
  <p>So the thing in the <code>1fr</code> grid is the following:</p>
  <pre><code>picture {
      display: grid;
      place-content: center;
  
      img {
          max-width: 100%;
          height: auto;
          object-fit: contain;
      }
  }
  </code></pre>
  <p>So the HTML setup is something like this (there are a bunch of other stuff, but this is the main stuff):</p>
  <pre><code>&lt;div class=&quot;parent&quot;&gt;
      &lt;div class=&quot;container&quot;&gt;
          &lt;p&gt;Some text&lt;/p&gt;
          &lt;picture&gt;
              &lt;img src=&quot;myimg.jpg&quot; /&gt;
          &lt;/picture
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  <p>The issue is that the images have some true size. So with this, and a big enough screen, there will be no issue since the images aren't screen size huge. So this actually just expands the image a wide as it truly is. However, when I make my screen smaller, the image dimensions are becoming larger than the size of the container, and instead of the image just adjusting to the container (which will grow/shrink according to screen size) it just remains the same, and will eventually push the rest of the content out of the viewport. I have tried with different configurations, but none seem to really work.</p>
  <p>I don't know if it can even be done with just pure CSS, but it's kind of annoying me.</p>