Javascript 可变高度滑动门按钮

我需要用作按钮的背景：

按钮应该具有动态宽度，如果我使用该技术，这不是问题。但是如果你仔细观察图像：上边缘和下边缘有点弯曲，所以它不起作用

我试图拉伸图像，但边缘变得模糊

有人知道这个问题的解决方案吗？
任何想法都很感激

编辑：

---

有些页面已经有几个固定宽度/高度的按钮，每个按钮都有“个人”背景：所以看起来很锐利。如果我在“我的”按钮上使用图像拉伸技术，那么它们之间会有对比，因为这一个看起来不会那么锐利。

是的，你可以用CSS来做， 如果您愿意，您可以保留图像：

button{
  height:50px;
  background-image:url("http://i.stack.imgur.com/lswk4.png");
  background-size: 100% 100%;
  border: none;
}

试试这个：

div{
  height:50px;
}
div img {
    position: relative;
    width: 100%;
    height: auto;
}

<div><img src="http://i.stack.imgur.com/lswk4.png" /></div>

div{
高度：50px；
}
部门经理{
位置：相对位置；
宽度：100%；
高度：自动；
}

---

示例：

背景大小

仅受IE9+支持是的，它在FF、Chrome和Safari中工作，但我的观点是旧版本的IE不支持它。@Dušan Radojević我忘了说按钮将包含长度可变的文本