vue用两张图片实现进度条，进度条能随着整体的宽度加宽而变长

用两张图片一张图片是进度条的背景，另一张是进度条，两个div嵌套在一起，进度条的长度能随着整体的
长宽而增加，做成响应式的，进度条的比例不变，请问应该如何书写代码，谢谢

进度条总体宽度和内部比例宽度都设置成百分比就好了
如有帮助，麻烦点一下 【采纳】，谢谢啦~

img

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
      .jindu{
          background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c7bc5b83cc80a80120577d640dbd.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641614300&t=0c8dd308a8d1faa516d6955b1157f57c');
          background-size: 100% 100%;
          width: 100%;
          height: 100px;
          border-radius: 50px;
          overflow: hidden;
      }
      img{
          width: 70%;
          height: 100%;
      }
    </style>
    <body>
        <div class="jindu">
            <img  src="https://img1.baidu.com/it/u=3918163337,3583154734&fm=26&fmt=auto"/>
        </div>
    </body>
</html>

可以使用把两张图片的宽度设置成百分比来实现

一个作为背景，一个图片的宽度 用百分比 实现 就行

你把 content 和 box背景换成 图片 就好了 。如果是动态百分比 需要借助 js来实现了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 30px;
            background: red;
        }
        .content{
            width: 80%;
            height: 100%;
            background: green;
        }
    </style>
</head>
<body>
    80%
    <div class="box">
        <div class="content"></div>
    </div>
</body>
</html>