title: Image in CSS grid won't resize to the max. size
body: <p>I am trying to create an HTML modal and I wanted to create the base HTML and the CSS in an external file first.</p>
  
  <p>The final output should look this:</p>
  
  <p><a href="https://i.stack.imgur.com/ph5D5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ph5D5.png" alt="Design Mock"></a>
  Design Mock
  <br></p>
  
  <p>The goal here is for the minimap to scale with the size of the modal while keeping the aspect ratio.
  This is for the game world of tanks and the maps should always be as big as possible (without cutting out any parts of the image).</p>
  
  <hr>
  
  <p>My first idea was to get the map as a background with.</p>
  
  <pre><code>background-size: cover;
  background-position: center;
  </code></pre>
  
  <p>This was my 1st idea since I used this before in another application and it worked ok. The problem here is that the image is not using all the space given by the grid.</p>
  
  <p><a href="https://i.stack.imgur.com/VBQNq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VBQNq.png" alt="Firefox DevToolScreen"></a>
  Grid view of image as background</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #EBEBEB;
    font-family: sans-serif;
    color: #343434;
  }
  
  .modal_content {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "modal_header" "modal_content";
    grid-gap: 25px;
  }
  
  .modal_header {
    background: #ACACAC;
    grid-area: modal_header;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "modal_title exit";
    padding: 10px;
    padding-right: 25px;
  }
  
  .modal_title {
    grid-area: modal_title;
    justify-self: center;
    align-self: center;
  }
  
  .modal_closeBtn {
    grid-area: exit;
    justify-self: right;
    align-self: center;
    font-size: 30px;
    font-weight: bold;
  }
  
  .modal_body {
    grid-area: modal_content;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    grid-template-areas: "modal_tactics modal_details";
    align-items: center;
    justify-items: center;
    grid-gap: 50px;
    padding: 15px;
  }
  
  .modal_img {
    padding: 50px;
    grid-area: modal_tactics;
    background: url("http://placekitten.com/512/512");
    background-size: cover;
    background-position: center;
  }
  
  .modal_details {
    font-size: 30px;
    grid-area: modal_details;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;link rel="stylesheet" href="css/modal.css"&gt;
    &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="simpleModal" class="modal"&gt;
      &lt;div class="modal_content"&gt;
        &lt;div class="modal_header"&gt;
          &lt;span class="modal_closeBtn" id="closeBtn"&gt;&amp;times;&lt;/span&gt;
          &lt;div class="modal_title"&gt;
            &lt;h2&gt;Modal Header&lt;/h2&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- End of modal_header --&gt;
        &lt;div class="modal_body"&gt;
          &lt;div class="modal_img" id="tactic"&gt;
  
          &lt;/div&gt;
          &lt;div class="modal_details"&gt;
            &lt;div class="modal_tanks"&gt;
              &lt;p&gt;Tanks&lt;/p&gt;
              &lt;ul&gt;
                &lt;li&gt;3x Progetto&lt;/li&gt;
                &lt;li&gt;5x Defender&lt;/li&gt;
                &lt;li&gt;2x WZ-132&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
            &lt;!-- End of modal_tanks --&gt;
            &lt;div class="modal_attacker"&gt;
              &lt;p&gt;List of Attacker:&lt;/p&gt;
              &lt;ul&gt;
                &lt;li&gt;[FAME]&lt;/li&gt;
                &lt;li&gt;[OMNI]&lt;/li&gt;
                &lt;li&gt;[G__G]&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
            &lt;!-- End of modal_attacker --&gt;
          &lt;/div&gt;
          &lt;!-- End of modal_details --&gt;
        &lt;/div&gt;
        &lt;!-- End of modal_body --&gt;
      &lt;/div&gt;
      &lt;!-- End of modal_content --&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p>The second try was to use the image inside the html with a <code>img</code> tag.
  This gives me the image in the full 512x512 size but it won't scale up or down based on the grid size.</p>
  
  <p><a href="https://i.stack.imgur.com/e4bfG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e4bfG.png" alt="screen with img tag"></a>
  img tag with grid view</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #EBEBEB;
    font-family: sans-serif;
    color: #343434;
  }
  
  .modal_content {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "modal_header" "modal_content";
    grid-gap: 25px;
  }
  
  .modal_header {
    background: #ACACAC;
    grid-area: modal_header;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "modal_title exit";
    padding: 10px;
    padding-right: 25px;
  }
  
  .modal_title {
    grid-area: modal_title;
    justify-self: center;
    align-self: center;
  }
  
  .modal_closeBtn {
    grid-area: exit;
    justify-self: right;
    align-self: center;
    font-size: 30px;
    font-weight: bold;
  }
  
  .modal_body {
    grid-area: modal_content;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    grid-template-areas: "modal_tactics modal_details";
    align-items: center;
    justify-items: center;
    grid-gap: 50px;
    padding: 15px;
  }
  
  .modal_img {
    padding: 5px;
    grid-area: modal_tactics;
    width: 100%;
    height: auto;
  }
  
  .modal_details {
    font-size: 30px;
    grid-area: modal_details;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;link rel="stylesheet" href="css/modal.css"&gt;
    &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="simpleModal" class="modal"&gt;
      &lt;div class="modal_content"&gt;
        &lt;div class="modal_header"&gt;
          &lt;span class="modal_closeBtn" id="closeBtn"&gt;&amp;times;&lt;/span&gt;
          &lt;div class="modal_title"&gt;
            &lt;h2&gt;Modal Header&lt;/h2&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- End of modal_header --&gt;
        &lt;div class="modal_body"&gt;
          &lt;div class="modal_img" id="tactic"&gt;
            &lt;img src="http://placekitten.com/512/512" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="modal_details"&gt;
            &lt;div class="modal_tanks"&gt;
              &lt;p&gt;Tanks&lt;/p&gt;
              &lt;ul&gt;
                &lt;li&gt;3x Progetto&lt;/li&gt;
                &lt;li&gt;5x Defender&lt;/li&gt;
                &lt;li&gt;2x WZ-132&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
            &lt;!-- End of modal_tanks --&gt;
            &lt;div class="modal_attacker"&gt;
              &lt;p&gt;List of Attacker:&lt;/p&gt;
              &lt;ul&gt;
                &lt;li&gt;[FAME]&lt;/li&gt;
                &lt;li&gt;[OMNI]&lt;/li&gt;
                &lt;li&gt;[G__G]&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
            &lt;!-- End of modal_attacker --&gt;
          &lt;/div&gt;
          &lt;!-- End of modal_details --&gt;
        &lt;/div&gt;
        &lt;!-- End of modal_body --&gt;
      &lt;/div&gt;
      &lt;!-- End of modal_content --&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Since those are the only 2 options I could come up with and I couldn't fix them or at least bend them so they would work I would be very glad for the help.</p>
  
  <hr>
  
  <p>Update:
  It seems like the image is using the full height of the grid-row which is good.  Is there the possibility that you have to solve this by resizing the row of the grid?</p>
  
  <p>My project where I was using this can be found under this <a href="https://github.com/Ironlors/WOT-CW-Dashboard/tree/development" rel="nofollow noreferrer">Github Link</a>
  You can see this with the minimaps resizing based on the available space.
  What they are not doing is keeping the aspect ratio but in that case that is acceptable.</p>
  
  <p>Even if I was changing the size of the row it would still create the same issue.
  An Idea: 
  Using JavaScript to get the width of the image and then set the <code>grid-template-row</code> to this specific value.</p>
  
  <hr>
  
  <p><strong>Breakthrough:</strong></p>
  
  <p>I simplified my HTML a bit in order to focus more on the problem.
  I removed the text and only kept the image.<br>
  Then I tried to use </p>
  
  <pre><code>  height:100%;
    width: auto;
  </code></pre>
  
  <p>instead of the other way around since this should dynamically change the height (which seems to be the main problem here).<br>
  This gave me the following view:  </p>
  
  <p><a href="https://i.stack.imgur.com/KdSpe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KdSpe.png" alt="automaticHeight"></a></p>
  
  <p>As it seems the height of the <code>modal_content</code> is to small so I added <code>height:100vh;</code> to it with left me with this code.</p>
  
  <pre><code>.modal_content {
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "modal_header" "modal_content";
    grid-gap: 25px;
  }
  </code></pre>
  
  <p>Now the image scales the way I want it to when I'm resizing the frame.
  Important here is that it keeps the aspect ratio, shows all content, and maintains the gives padding.</p>
  
  <p><a href="https://i.stack.imgur.com/nDrxc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nDrxc.png" alt="scaling kitten"></a></p>
  
  <p>The final code would then be this.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #EBEBEB;
    font-family: sans-serif;
    color: #343434;
  }
  
  .modal {}
  
  .modal_content {
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "modal_header" "modal_content";
    grid-gap: 25px;
  }
  
  .modal_header {
    background: #ACACAC;
    grid-area: modal_header;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "modal_title exit";
    padding: 10px;
    padding-right: 25px;
  }
  
  .modal_title {
    grid-area: modal_title;
    justify-self: center;
    align-self: center;
  }
  
  .modal_closeBtn {
    grid-area: exit;
    justify-self: right;
    align-self: center;
    font-size: 30px;
    font-weight: bold;
  }
  
  .modal_body {}
  
  .modal_img {
    margin: 50px;
    height: 100%;
    width: auto;
    background: url("http://placekitten.com/512/512");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .modal_details {
    font-size: 30px;
    grid-area: modal_details;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;link rel="stylesheet" href="css/modal.css"&gt;
    &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="simpleModal" class="modal"&gt;
      &lt;div class="modal_content"&gt;
        &lt;div class="modal_header"&gt;
          &lt;span class="modal_closeBtn" id="closeBtn"&gt;&amp;times;&lt;/span&gt;
          &lt;div class="modal_title"&gt;
            &lt;h2&gt;Modal Header&lt;/h2&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- End of modal_header --&gt;
        &lt;div class="modal_body"&gt;
          &lt;div class="modal_img" id="tactic"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- End of modal_body --&gt;
      &lt;/div&gt;
      &lt;!-- End of modal_content --&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p>I really hope that this solves the problem and I'll start adding the other elements to give the final answer.
  The only problem left here is to calculate the height I have to attach to the modal_body since this will probably change with the used aspect ratio (media_query).
  Another reason why he correct height will be important is because I don't want any scrollbar inside the modal so it has to fit correctly.</p>