Создание CSS-треугольника на IMG отзывчивым

Question

Хотел сделать треугольник на изображении отзывчивым, но он не изменил размер и стал совсем не выровненным. Как это исправить?

        .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

Сначала добавьте position:relative к родителю (в вашем случае .image) с позицией начальной загрузки

Второе использование bootstrap-4 classes как w-100 до .image/img

код в скрипке

.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.stack.imgur.com/vdzwt.jpg" class="img-fluid  w-100">
</div>