CSS图像叠加使引导程序响应

Question

I have an image that I created an overlay for, however I can't figure out how to make the height responsive. I either have to define it in pixels, or it doesn't work. I am hoping to have both the height and width adjust responsively, keeping the same image aspect ratio. Here is my 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>

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

Help is much appreciated!

Answer 1

try that :

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

Answer 2

Alternatively, get down and dirty and grab the height of the image with jquery, something like:

var imgheight = $('.imgrd').height();
$('.text-content').height(imgheight);

I would avoid this if any CSS methods fit your use though :)

Answer 3

You want to make the li span act as a table cell in order to properly get the text in the middle of the overlay:

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

Then, you need to make the IMG responsive. Right now it's not, so the overlay is 100% width and height of the image, but the image won't change when the container shrinks. So:

img.imgrd {
  border-radius: 10px 125px;
  width: 100%;
  max-width: 100%;
  height: auto;
}

After that, you have some <br> tags which break the layout... so remove them. And update your span.text-content to make sure it starts at the top of the image (0px and not 25px), and also set the box-sizing property to accommodate the 5px border:

span.text-content {
  display: inline-block;
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  left: 0;
  position: absolute;
  top: 0;
  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;
  box-sizing: border-box;
}

See the JSFiddle here:

https://jsfiddle.net/xeqhepn4/2/