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

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

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

3条回答默认最新

前端阿彬前端领域新星创作者 2021-12-09 11:54

关注

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

<!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>