title: Controlling the size of an image within a CSS Grid layout
body: <p>I have a CSS grid layout with a bunch of areas and a photo container.</p>
  
  <p>I don't know how to:</p>
  
  <ol>
  <li><p>control the size of the photo, so that it is contained within the area of the grid</p></li>
  <li><p>keep the width of the photo at 100% (thus equal to its container) and scale the height of the container to fit the photo. Basically, when the window becomes smaller, the width of the photo becomes smaller, and so does the height - pulling the tag, album, and rotate elements up.</p></li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 40vh 30vh 30vh;
    grid-gap: 10px;
    grid-template-areas: 
      "info    photo photo photo   photo" 
      "comment photo photo photo   photo" 
      "comment tag     tag   album rotate"
  }
  
  .photo {
    grid-area: photo;
    background: yellow;
  }
  
  .photo&gt;img {
    object-fit: cover;
    width: 100%
  }
  
  .info {
    grid-area: info;
    background: pink;
  }
  
  .tag {
    grid-area: tag;
    background: teal;
  }
  
  .comment {
    grid-area: comment;
    background: green;
  }
  
  .album {
    grid-area: album;
    background: red;
  }
  
  .rotate {
    grid-area: rotate;
    background: blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="photo"&gt;
      &lt;img src="http://wallpaper-gallery.net/images/image/image-13.jpg" /&gt;
    &lt;/div&gt;
    &lt;div class="info"&gt;info&lt;/div&gt;
    &lt;div class="tag"&gt;tag&lt;/div&gt;
    &lt;div class="comment"&gt;comment&lt;/div&gt;
    &lt;div class="album"&gt;album&lt;/div&gt;
    &lt;div class="rotate"&gt;rotate&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>