javascript - 可变高度的滑动门按钮

Question

我需要使用 this image作为按钮的背景:

按钮应该有动态宽度，如果我使用 sliding door 这不是问题技术。但是如果你仔细观察图像:顶部和底部边缘有点 flex ，所以它不起作用。

我试图拉伸(stretch)图像，但边缘变得模糊。

有人知道这个问题的解决方案吗？
任何想法表示赞赏!

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

Answer 1

试试这个:

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

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

示例:http://jsfiddle.net/Q8f9t/4/