Html CSS-创建自定义拉伸条

我想做一个定制酒吧。其中包括以下内容：

比方说我从photoshop中删除了这样的资源：

我想动态设置此酒吧容器的高度（以%为单位或取决于platfrom（移动/桌面））并接收以下行为：

• 左、右图像会相应地粘贴到容器的左、右角
• 左右图像保持其纵横比
• 中间图像拉伸（或重复）以感觉整个酒吧

现在我让它工作了，但只使用手动设置的层次：

.container {
  width:80%;
  top:3%;
  height:152px;
  float:left;
  display: table;
  margin-left: auto;
  margin-right: auto;
  position: fixed;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.left, .right, .middle {
  display:table-cell;
  text-indent: -9999px;
}

.left, .right {
  background-repeat: no-repeat;
  background-size: contain;
}

.left {
  background-image: url("...");
  width: 121px;
}

.right {
  background-image: url("...");
  width: 115px;
}

.middle {
  background-image: url("...");
  background-repeat: repeat-x;
}

问题是我输入了图像的值（宽度、高度），这不符合我的需要。我希望图像比实际的酒吧更大，这样我就可以在桌面/手机等设备上使用相同的图像。我希望动态设置酒吧订婚者的高度，并使其适当拉伸

---

我还想运行酒吧的容器宽度动画，并看到它拉伸。这可能吗？

SVG可能是最佳选择。我该如何使用它？如果我只有3个上面用红色矩形标记的PNG怎么办？