javascript - 响应式图像上的响应式悬停框

Question

我一直在使用一个教程来使悬停框在一组图像上移动。
文章可见here .

它完美地工作，除了我希望我的图像和悬停响应窗口大小(只需通过宽度就可以)，我已经尝试查找如何执行此操作。看起来可能是使用 % 而不是固定值的情况，但没有足够的经验知道如何执行标记。即使我让图像调整大小，悬停框也不会随之调整大小。

是否可以在现有的 CSS 中添加一些东西来实现这一点。

ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.img-list li {
  display: inline-block;
  height: 150px;
  margin: 0 1em 1em 0;
  position: relative;
  width: 150px;
}

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 150px;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

span.text-content span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

ul.img-list li:hover span.text-content {
  opacity: 1;
}

<ul class="img-list">
  <li>
    <a href="#">
      <img src="http://placehold.it/150x150">
      <span class="text-content"><span>Text</span></span>
    </a>
  </li>
</ul>

Answer 1

您可以仅使用宽度来保持图像比例。

您可以对 a 和 img 使用 display:block，并使用 flex 使文本居中。

不太确定您要寻找的响应行为，您可以在 li 上使用 % width 或混合使用 % width + min-width 和 max-width。

例如，% 宽度设置为 50%(和最大/最小宽度)，它可以是任何其他值和单位。

ul.img-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.img-list li {
  display: inline-block;
  vertical-align:top;
  margin: 0;
  position: relative;
  width:50%;
  max-width:100vh;
  min-width:60vh;
}
ul.img-list li a, ul.img-list li a img {
  display:block;
  width:100%;
  }
span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display:flex;
  left: 0;
  right:0;
  position: absolute;
  top: 0;
  bottom:0;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

span.text-content span {
  margin:auto;
}

ul.img-list li:hover span.text-content {
  opacity: 1;
}
* {
  margin:0;
  padding:0;
  }

<ul class="img-list">
  <li>
    <a href="#">
      <img src="http://placehold.it/150x150">
      <span class="text-content"><span>Text</span></span>
    </a>
  </li>
</ul>