我有一张图片,我为其创建了一个叠加层,但我不知道如何使高度响应。我要么必须以像素为单位定义它,要么它不起作用。我希望高度和宽度都能响应地调整,保持相同的图像纵横比。这是我的 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;
}
非常感谢您的帮助!
最佳答案
试试看:
ul.img-list li {
display: inline-block;
margin: 0 1em 1em 0;
position: relative;
width: 100%;
height: auto;
}
关于jquery - Css 图像叠加通过 Bootstrap 做出响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36081792/