Problem: container has 200px width, image can have dynamic width (100px, 120px, whatever)

img::after does not work at all.

<https://jsfiddle.net/8j1r0nmk/3/>

```
<div class='wrapper'>
<div class='img-wrap'>
<img class='img-responsive' src='http://via.placeholder.com/150x150' alt='' />
</div>
</div>

.wrapper {
  position: relative;
  width: 200px;
  border: 1px solid black;
}
.img-responsive {
  display: block;
  max-width: 100%;
  height: 100%;
}
.img-wrap::after {
  display: block;
  position: absolute;
  content: ' ';
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(40, 40, 60, 0.1);
}

```

I can not set width for .img-wrap because it breaks image width.

What are my options?