CODEWITHSUNDEEP
htmlcssgoogle-chromefirefoxinternet-explorer-11
chobo2
chobo2

Reputation: 85775

Keep 100% width inside an relative container?

I have something like this

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

In chrome it looks as I wanted.

enter image description here

but in IE 11 & FF

enter image description here

What do I need to add to keep the gray bar contained in the div?

Upvotes: 0

Views: 45

Answers (2)

Aaron
Aaron

Reputation: 199

The problem is the fixed height of the .container. If you have control of the sizing of these images I would just remove the fixed height of the .container and display: block; on the image to remove the spacing under it.

If you need it to accomodate varying aspect ratios then it's more complicated and there's never a perfect solution that looks neat.

Upvotes: 0

Sensoray
Sensoray

Reputation: 2420

Instead of width:100%; just add right:0;. This will always keep the edges of the inner box against the left and right sides.

Upvotes: 1

Related Questions