javascript - 高さ可変の引き戸ボタン

Question

この画像をボタンの背景として 使用する必要があります。

ボタンの幅は動的である必要があります。これは、引き戸の手法を使用する場合は問題ありません。ただし、画像をよく見ると、上端と下端が少し曲がっているため、機能しません。

画像を引き伸ばそうとしましたが、エッジがぼやけてしまいました。

誰かがこの問題の解決策を知っていますか？
どんなアイデアでも大歓迎です！

編集：
一部のページには、幅/高さが固定されたボタンがすでにいくつかあり、それぞれが「個人的な」背景になっているため、シャープに見えます。「マイ」ボタンで画像ストレッチテクニックを使用すると、これはそれほどシャープに見えないため、両者の間にコントラストがあります。

Answer 1

はい、CSSでそれを行うことができます。そうする場合は、画像を保持できます。

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

Answer 2

これを試して：

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/