水平拉伸图像中间

Question

How do I stretch just the middle of an image horizontally?

For example, I have this image:

_{(source: lawrenceinspections.com )}

I want the rounded corners to be the same as it is now (so stretching the whole image will not work). I just want to take the middle and stretch it based off what content is inside. Vertically everything should stay the same height.

How do I do this? Thanks!

Answer 1

1. Make a copy of image and put it to a div with style="overflow:hidden";
2. Center image in that div;
3. Dublicate that div and place it side-by-side any times you need;
4. Wrap thouse divs with two divs on starn and on end, countaining the copy of you image start and image end accordinatly;

Answer 2

You'll most likely need three separate images. And three separate divs.

One div for the left side with the left side of the image, one div for the center - which would be where your content is, and one div to the right side which would also just be an image.

Hopefully that makes sense. You can also make a similar looking button using pure CSS without using any graphics.

Here's an example with pure css (though thats not what you asked, I know :)):

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;
}