javascript - 画像の中央を横に伸ばす

Question

画像の中央だけを横に伸ばすにはどうすればよいですか?

たとえば、次の画像があります。

_{（出典：lawrenceinspections.com）}

丸みを帯びた角を現在と同じにしたい（そのため、画像全体を引き伸ばすことはできません）。真ん中を取り、中身に基づいて伸ばしたいだけです。垂直方向には、すべて同じ高さを維持する必要があります。

どうすればいいですか？ありがとう！

Answer 1

1. 画像のコピーを作成し、style="overflow:hidden"; を使用して div に配置します。
2. その div の中央に画像を配置します。
3. その div を複製し、必要なときにいつでも並べて配置します。
4. スターンとエンドの 2 つの div で thouse div をラップし、イメージの開始とイメージの終了のコピーを適切にカウントします。

Answer 2

ほとんどの場合、3 つの個別の画像が必要になります。そして3つの別々のdiv。

左側に 1 つの div、画像の左側に 1 つの div、中央に 1 つの div (コンテンツがある場所)、右側に 1 つの div (これも単なる画像)。

うまくいけば、それは理にかなっています。また、グラフィックスを使用せずに純粋な CSS を使用して、同様の外観のボタンを作成することもできます。

これは純粋なcssの例です（ただし、それはあなたが尋ねたものではありませんが、私は知っています:)）：

http://jsfiddle.net/PWNLf/1/

.button{
    background: rgb(194,172,224); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(194,172,224,1) 0%, rgba(232,241,242,1) 30%, rgba(186,241,244,1) 31%, rgba(18,65,206,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(194,172,224,1)), color-stop(30%,rgba(232,241,242,1)), color-stop(31%,rgba(186,241,244,1)), color-stop(100%,rgba(18,65,206,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(194,172,224,1) 0%,rgba(232,241,242,1) 30%,rgba(186,241,244,1) 31%,rgba(18,65,206,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(194,172,224,1) 0%,rgba(232,241,242,1) 30%,rgba(186,241,244,1) 31%,rgba(18,65,206,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(194,172,224,1) 0%,rgba(232,241,242,1) 30%,rgba(186,241,244,1) 31%,rgba(18,65,206,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(194,172,224,1) 0%,rgba(232,241,242,1) 30%,rgba(186,241,244,1) 31%,rgba(18,65,206,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c2ace0', endColorstr='#1241ce',GradientType=0 ); /* IE6-9 */
color: #fff;
font-family: helvetica;
padding: 30px 60px;
    border-radius: 40px;
    text-decoration: none; 
    border: 1px solid #1241CE;
}