使 IMG 上的 CSS 三角形响应式

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 position

第二次使用bootstrap-4 classes 作为w-100 到.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.stack.imgur.com/vdzwt.jpg" class="img-fluid  w-100">
</div>