jquery - Css 图像叠加通过 Bootstrap 做出响应

Question

我有一张图片，我为其创建了一个叠加层，但我不知道如何使高度响应。我要么必须以像素为单位定义它，要么它不起作用。我希望高度和宽度都能响应地调整，保持相同的图像纵横比。这是我的 HTML:

<ul class="img-list">
  <li>
    <a href="http://nataliemac.com"><br>
       <img class="imgrd" src="http://127.0.0.1:8080/wordpress/wp-content/uploads/2016/03/PIC_6436-300x199.jpg" width="900" height="597" class="alignnone size-medium wp-image-189"><br>
       <span class="text-content"><span>Place Name</span></span><br>
    </a>
  </li>
<p>
  ...
</p>

还有我的 CSS

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

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

}

span.text-content span {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

ul.img-list li:hover span.text-content {
  opacity: 1;
}
span.text-content {
  display: inline-block;
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  left: 0;
  position: absolute;
  top: 25px;
  width: 100%; 
  height: 100%;
  border: 5px solid #fff;
  border-radius: 10px 125px;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}

img.imgrd {
  border-radius: 10px 125px;
}

非常感谢您的帮助!

Answer 1

试试看:

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