在相关容器内保持 100% 宽度？

Question

我有这样的东西

<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 中包含的灰色条？

Answer 1

只需添加 right:0; 而不是 width:100%;。这将始终保持内框的边缘紧贴左右两侧。

Answer 2

问题是 .container 的固定高度。如果您可以控制这些图像的大小，我将删除图像上 .container 和 display: block; 的固定高度以删除其下方的间距。

如果您需要它来适应不同的宽高比，那么它会更加复杂，并且从来没有看起来整洁的完美解决方案。

在相关容器内保持 100% 宽度？

Keep 100% width inside an relative container?

html

css

firefox

google-chrome

internet-explorer-11