我有类似的东西
<div class="container">
<div class="img-container">
<img class="thumbnail" src="https://via.placeholder.com/250x250" />
<div classe="img-icon-container">
<i class="photo-icon fas fa-camera-retro" />
<span>10</span>
</div>
</div>
</div>
.container{
height: 200px;
display: flex;
margin-bottom: 20px;
.img-container {
position: relative;
.thumbnail {
height: 100%;
}
.img-icon-container {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
background-color: rgba(110, 110, 110, 0.8);
i {
margin-left: 5px;
margin-right: 5px;
font-size: 20px;
color: white;
}
&:hover {
background-color: blue;
}
}
}
}
在Chrome中它看起来像我想要的。
但在IE 11和FF中
我需要添加什么来保持div中包含的灰色条?
而不是width:100%;
只需添加right:0;
。这将始终保持内箱的边缘抵靠左侧和右侧。
问题是.container
的固定高度。如果您可以控制这些图像的大小,我会删除图像上.container
和display: block;
的固定高度,以消除其下方的间距。
如果你需要它来适应不同的宽高比,那么它就会变得更复杂,而且从来没有一个看起来很整洁的完美解决方案。