Image in CSS grid won't resize to the max. size

Question

I am trying to create an HTML modal and I wanted to create the base HTML and the CSS in an external file first.

The final output should look this:

Design Mock

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).

My first idea was to get the map as a background with.

background-size: cover;
background-position: center;

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.

Grid view of image as background

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;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/modal.css">
  <title>Document</title>
</head>

<body>
  <div id="simpleModal" class="modal">
    <div class="modal_content">
      <div class="modal_header">
        <span class="modal_closeBtn" id="closeBtn">&times;</span>
        <div class="modal_title">
          <h2>Modal Header</h2>
        </div>
      </div>
      <!-- End of modal_header -->
      <div class="modal_body">
        <div class="modal_img" id="tactic">

        </div>
        <div class="modal_details">
          <div class="modal_tanks">
            <p>Tanks</p>
            <ul>
              <li>3x Progetto</li>
              <li>5x Defender</li>
              <li>2x WZ-132</li>
            </ul>
          </div>
          <!-- End of modal_tanks -->
          <div class="modal_attacker">
            <p>List of Attacker:</p>
            <ul>
              <li>[FAME]</li>
              <li>[OMNI]</li>
              <li>[G__G]</li>
            </ul>
          </div>
          <!-- End of modal_attacker -->
        </div>
        <!-- End of modal_details -->
      </div>
      <!-- End of modal_body -->
    </div>
    <!-- End of modal_content -->
  </div>
</body>

</html>

The second try was to use the image inside the html with a img tag. This gives me the image in the full 512x512 size but it won't scale up or down based on the grid size.

img tag with grid view

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;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/modal.css">
  <title>Document</title>
</head>

<body>
  <div id="simpleModal" class="modal">
    <div class="modal_content">
      <div class="modal_header">
        <span class="modal_closeBtn" id="closeBtn">&times;</span>
        <div class="modal_title">
          <h2>Modal Header</h2>
        </div>
      </div>
      <!-- End of modal_header -->
      <div class="modal_body">
        <div class="modal_img" id="tactic">
          <img src="http://placekitten.com/512/512" alt="">
        </div>
        <div class="modal_details">
          <div class="modal_tanks">
            <p>Tanks</p>
            <ul>
              <li>3x Progetto</li>
              <li>5x Defender</li>
              <li>2x WZ-132</li>
            </ul>
          </div>
          <!-- End of modal_tanks -->
          <div class="modal_attacker">
            <p>List of Attacker:</p>
            <ul>
              <li>[FAME]</li>
              <li>[OMNI]</li>
              <li>[G__G]</li>
            </ul>
          </div>
          <!-- End of modal_attacker -->
        </div>
        <!-- End of modal_details -->
      </div>
      <!-- End of modal_body -->
    </div>
    <!-- End of modal_content -->
  </div>
</body>

</html>

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.

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?

My project where I was using this can be found under this Github Link 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.

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 grid-template-row to this specific value.

Breakthrough:

I simplified my HTML a bit in order to focus more on the problem. I removed the text and only kept the image.
Then I tried to use

  height:100%;
  width: auto;

instead of the other way around since this should dynamically change the height (which seems to be the main problem here).
This gave me the following view:

As it seems the height of the modal_content is to small so I added height:100vh; to it with left me with this 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;
}

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.

The final code would then be this.

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;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/modal.css">
  <title>Document</title>
</head>

<body>
  <div id="simpleModal" class="modal">
    <div class="modal_content">
      <div class="modal_header">
        <span class="modal_closeBtn" id="closeBtn">&times;</span>
        <div class="modal_title">
          <h2>Modal Header</h2>
        </div>
      </div>
      <!-- End of modal_header -->
      <div class="modal_body">
        <div class="modal_img" id="tactic">
        </div>
      </div>
      <!-- End of modal_body -->
    </div>
    <!-- End of modal_content -->
  </div>
</body>

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.

score 0 · Answer 1 · answered Jul 28 '18 at 18:02

I think it's possible to expand the width of your background image by adding width and height to your modal_img class and declaring box-sizing style to it.

See updated code below:

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;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

.modal_details {
  font-size: 30px;
  grid-area: modal_details;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/modal.css">
  <title>Document</title>
</head>

<body>
  <div id="simpleModal" class="modal">
    <div class="modal_content">
      <div class="modal_header">
        <span class="modal_closeBtn" id="closeBtn">&times;</span>
        <div class="modal_title">
          <h2>Modal Header</h2>
        </div>
      </div>
      <!-- End of modal_header -->
      <div class="modal_body">
        <div class="modal_img" id="tactic">

        </div>
        <div class="modal_details">
          <div class="modal_tanks">
            <p>Tanks</p>
            <ul>
              <li>3x Progetto</li>
              <li>5x Defender</li>
              <li>2x WZ-132</li>
            </ul>
          </div>
          <!-- End of modal_tanks -->
          <div class="modal_attacker">
            <p>List of Attacker:</p>
            <ul>
              <li>[FAME]</li>
              <li>[OMNI]</li>
              <li>[G__G]</li>
            </ul>
          </div>
          <!-- End of modal_attacker -->
        </div>
        <!-- End of modal_details -->
      </div>
      <!-- End of modal_body -->
    </div>
    <!-- End of modal_content -->
  </div>
</body>

</html>

the problem here is that it is cropping the image based on the size. (changing aspect ratio) I would like to see everything in the image all the time. — Ironlors, Jul 28 '18 at 18:08
then it's not resizing. I just saw that the image is using the whole height of the grid so is there a problem with the grid-row not resizing? — Ironlors, Jul 28 '18 at 18:39
change grid-template-columns on modal_body class to this: `grid-template-columns: 10fr 2fr;` — Weisen, Jul 28 '18 at 18:53
this is only changing the ratio between the image and the text. This is sadly not solving the problem — Ironlors, Jul 28 '18 at 19:38

score 0 · Answer 2 · answered Jul 29 '18 at 19:25

The solution is to set the height of the modal_content so the image has a space to fill. You just have to scale the image with.

.modal_img {
  grid-template-areas: tactic;
  margin: 25px;
  height: 100%;
  width: auto;
  background: url("http://placekitten.com/512/512");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

and it works fine.

Then you only have to add the other elements and you'll get the final result.

body {
  background: #EBEBEB;
  font-family: sans-serif;
  color: #343434;
}

.modal_content {
  display: grid;
  height: 85vh;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "modal_header" "modal_content";
}

.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-template-columns: 1fr 1fr;
  grid-template-areas: "tactic details";
  display: grid;
  height: 100%;
}

.modal_img {
  grid-template-areas: tactic;
  margin: 25px;
  height: 100%;
  width: auto;
  background: url("http://placekitten.com/512/512");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.modal_details {
  margin: 25px;
  height: 100%;
  grid-area: details;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 15px;
  align-items: center;
  justify-items: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/modal.css">
  <title>Document</title>
</head>

<body>
  <div id="simpleModal" class="modal">
    <div class="modal_content">
      <div class="modal_header">
        <span class="modal_closeBtn" id="closeBtn">&times;</span>
        <div class="modal_title">
          <h2>Modal Header</h2>
        </div>
      </div>
      <!-- End of modal_header -->
      <div class="modal_body">
        <div class="modal_img" id="tactic">
        </div>
        <div class="modal_details" id="modal_details">
          <div id="modal_attacker">
            <p>Attacker</p>
            <ul>
              <li>OMNI</li>
              <li>FAME</li>
              <li>G__G</li>
            </ul>
          </div>
          <div id="Tanks">
            <p>Tanks</p>
            <ul>
              <li>4x Defender</li>
              <li>4x Progetto</li>
              <li>2x WZ-132</li>
            </ul>
          </div>
        </div>
      </div>
      <!-- End of modal_body -->
    </div>
    <!-- End of modal_content -->
  </div>
</body>

This solves the problem even though I am not exactly sure why.

Image in CSS grid won't resize to the max. size

2 Answers2