Making CSS triangle on IMG responsive

Question

Looking to make responsive triangle on image, but it doesn't resize and it becomes out of alignment at all. How to fix it?

        .image {
            width: 100%;
        }

        .image:after {
            content: '';
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 20px solid #f5f5f5;
            position: absolute;
            left: 45%;
            top: 63%;
            transform: translatex(-50%);
            /** making it horizontally center **/
        }

<div class="image">
     <img src="img/frankie.png" class="img-fluid">
</div>

Answer 1

First add position:relative to parent(in your case .image) with bootstrap position

Second use bootstrap-4 classes as w-100 to .image/img

Code in fiddle

.image:after {
  content: '';
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #f5f5f5;
  position: absolute;
  left: 45%;
  top: 63%;
  transform: translatex(-50%);
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
<div class="image w-100 position-relative">
     <img src="https://i.sstatic.net/vdzwt.jpg" class="img-fluid  w-100">
</div>