Question

目前，我正在研究Javascript，HTML，CSS和Google地图项目。目前，我只有地图和一个按钮，用于打开一个包含图像列表的框。

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

这是我的清单。

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

我想将此比例缩放到屏幕的大小，但是我尝试的任何方法都没有用。我总会得到这样的东西，这不是我想要的。

https://imgur.com/a/UwCgRgc

我看过很多教程和很多stackoverflow帖子，但是我无法自己实现自己想要的。有什么建议吗？

Answer 1

如果需要onClick事件，请使用onclick事件document.getElementById("your_id").style.backgroundSize="cover"或set width=100% height=100% position:center，如果默认需要，只需将background-size="cover"放在元素的CSS中即可。

如何在Javascript中创建图像的自适应列表？

1 个答案: