Image stretch

HTML & CSS
1

I would like to copy the user plate like the image below. I have 3 images which are left center and right. The center image i would like to stretch to the length of the text. How would i do this?

2

Hi,

We’d need a little bit more information about how the image is supposed to stretch and what it is exactly that you require for the end result?

If you stretch the image width then you also need to let the height stretch otherwise the aspect ratio will be wrong.

Here is an example of where apsect ratio is maintained and the image gets taller and wider and an example where just the width is stretched but you lose aspect ratio.

http://www.pmob.co.uk/temp/image-stretch-test4.htm

There are also some things you can do with background-size for background images in modern browers.

3

the center image will be 1px in width and I would just like to reapeat for the length of the text.

4

It’s still not clear what you are trying to do. Do you want the image you posted to be able to get wider? You can set background images to repeat.

5

The user plate has 3 images which are leftimage, centerimage and rightimage. I would like the left image on the left side and the right image on the right side. The centerimage I would like to display as a background between the 2 other images but stretch the only the length of the text.

6

I think this is what Mike is trying to describe. I cut his image into 4 pieces to do this. Could have been done with 3, but the minimum text width would have been greater (not apparent here). If this is correct, I’ll upload the image segments and the code, but the code is not very “efficient”.

7

Hopefully ronpat has correctly interpreted what you mean by “userplate”. It means nothing to me.

8

correct ronpat :wink:

9

OK, here are two how-to samples. The one that uses css table elements seems to be predictable and flawless across current browsers; very easy to use. The one that uses inline-block and positioned elements works, too. Anyway, I’m sure there are other ways of doing this.

4 image segments are included.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?1017075-Image-stretch
Thread: Image stretch
2013.03.31 09:17
 Mike4x4s
-->
<head>
    <title>inline-block and pa</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">
body {
    text-align:center;
}
.widget {
    outline:1px solid magenta;    /* TEST OUTLINE */
    display:inline-block;
    min-width:52px;
    background:transparent url('cpdeluxe.gif') 50% 0 no-repeat;
    height:66px;
    margin:0 6px;
}
.cpl {
    content:"";
    position:absolute;
    left:-6px;
    top:0;
    background:transparent url('cpl.gif') 0 0 no-repeat;
    width:6px;
    height:66px;
}
.cpc {
    display:inline-block;
    position:relative;
    background:transparent url('cpc.gif') 50% 0 repeat-x;
    height:66px;
}
.cpr {
    content:"";
    position:absolute;
    right:-6px;
    top:0;
    background:transparent url('cpr.gif') 100% 0 no-repeat;
    width:6px;
    height:66px;
}
p {
    font-size:11px;
    padding-top:51px;
    margin:0;
}
    </style>
</head>
<body>

<div class="widget">
    <div class="cpc">
        <p>text</p>
        <div class="cpl"></div>
        <div class="cpr"></div>
    </div>
</div>
<div class="widget">
    <div class="cpc">
        <p>text here</p>
        <div class="cpl"></div>
        <div class="cpr"></div>
    </div>
</div>
<div class="widget">
    <div class="cpc">
        <p>text is inserted here</p>
        <div class="cpl"></div>
        <div class="cpr"></div>
    </div>
</div>
<div class="widget">
    <div class="cpc">
        <p>even more text can be inserted here</p>
        <div class="cpl"></div>
        <div class="cpr"></div>
    </div>
</div>

</body>
</html>




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?1017075-Image-stretch
Thread: Image stretch
2013.03.31 09:17
 Mike4x4s
-->
<head>
    <title>table-cells</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
    <style type="text/css">
body {
    text-align:center;
}
.widget {
    outline:1px solid magenta;    /* TEST OUTLINE */
    display:inline-table;
    background:transparent url('cpdeluxe.gif') 50% 0 no-repeat;
    margin:0;
}
.cpl {
    display:table-cell;
    background:transparent url('cpl.gif') 0 0 no-repeat;
    width:6px;
}
.cpc {
    display:table-cell;
    vertical-align:bottom;
    background:transparent url('cpc.gif') 50% 0 repeat-x;
    min-width:40px;
    height:66px;
}
.cpr {
    display:table-cell;
    background:transparent url('cpr.gif') 100% 0 no-repeat;
    width:6px;
}
p {
    font-size:11px;
    padding-bottom:2px;
    margin:0;
}
    </style>
</head>
<body>

<div class="widget">
    <div class="cpl"></div>
    <div class="cpc">
        <p>text</p>
    </div>
    <div class="cpr"></div>
</div>
<div class="widget">
    <div class="cpl"></div>
    <div class="cpc">
        <p>text here</p>
    </div>
    <div class="cpr"></div>
</div>
<div class="widget">
    <div class="cpl"></div>
    <div class="cpc">
        <p>text is inserted here</p>
    </div>
    <div class="cpr"></div>
</div>
<div class="widget">
    <div class="cpl"></div>
    <div class="cpc">
        <p>even more text can be inserted here</p>
    </div>
    <div class="cpr"></div>
</div>

</body>
</html>
10

These days I’d just use border-radius as in my example and let old browsers have square corners. It saves on images and can easily be modified if needed.

11

…and it won’t “break” if the users zoom their text. :slight_smile:

12

True :slight_smile: It’s tough to get clients to see the added benefits of keeping things simple sometimes as all they want is a pretty picture that matches the PSD.