Argthtjtr

Currently, I am working on a Javascript, HTML, CSS and Google maps project.
For now, I only have the map and a button which opens a box with a list of images.

.report-img {

  margin: 20px;

  outline: none;

  z-index: 5;

  position: absolute;

}



.report-box {

  padding: 10px;

  border: 2px solid black;

  background-color: white;

  position: fixed;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 5;

  box-sizing: border-box;

}



ul {

  margin: 10px;

  padding: 0;

  overflow: hidden;

  display: block;

}



li {

  display: block;

  float: left;

  margin-top: 5px;

  margin-left: 15px;

  margin-right: 15px;

  margin-bottom: 5px;

}



.listImage {

  outline: none;

  width: 100%;

  height: auto;

}



.listText {

  font-size: 12px;

  text-align: center;

  word-wrap: break-word;

  width: 60px;

}

This is my list.

<img

        id="report-img"

        class="report-img"

        src="pictures/64/sea.png"

        onclick="openReportBox()"

      />

      <div id="report-box" class="report-box" style="display: none">

        <ul id="variableTable" style="display: block">

          <li>

            <img

              id="dirtywater"

              class="listImage"

              src="pictures/64/dirtywater.png"

              width="64"

              height="64"

            />

            <p class="listText">Agua sucia</p>

          </li>

          <li>

            <img

              id="group"

              class="listImage"

              src="pictures/64/group.png"

              width="64"

              height="64"

            />

            <p class="listText">Gente</p>

          </li>

          <li>

            <img

              id="jellyfish"

              class="listImage"

              src="pictures/64/jellyfish.png"

            />

            <p class="listText">Agua-vivas</p>

          </li>

          <li>

            <img

              id="waves"

              class="listImage"

              src="pictures/64/waves.png"

              width="64"

              height="64"

            />

            <p class="listText">Olas</p>

          </li>

          <li>

            <img

              id="wind"

              class="listImage"

              src="pictures/64/windy.png"

              width="64"

              height="64"

            />

            <p class="listText">viento</p>

          </li>

        </ul>

I want to make this scale to the size of the screen but whatever I try is useless. I always end up with something like this which is not what I want.

https://imgur.com/a/UwCgRgc

I ve seen a lot of tutorials and a lot of stackoverflow posts but I could not manage myself to achieve what I want. Any suggestion?

Use onclick event document.getElementById("your_id").style.backgroundSize="cover"orset width=100% height=100% position:centerif you want onClick event else simply right background-size="cover" in the css of your element if you want it by default.