SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: Image stretch

  1. #1
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image stretch

    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?

    cpdeluxe.gif
    Animated Chatrooms - www.121chatrooms.net

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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. #3
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the center image will be 1px in width and I would just like to reapeat for the length of the text.
    Animated Chatrooms - www.121chatrooms.net

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,211
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Mike4x4s View Post
    the center image will be 1px in width and I would just like to reapeat for the length of the text.
    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. #5
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Animated Chatrooms - www.121chatrooms.net

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Mink4x4s.jpg

    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. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,211
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Mike4x4s View Post
    The user plate has 3 images
    Hopefully ronpat has correctly interpreted what you mean by "userplate". It means nothing to me.

  8. #8
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    correct ronpat
    Animated Chatrooms - www.121chatrooms.net

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    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.

    cpdeluxe.gif
    cpc.gif
    cpl.gif
    cpr.gif

    Code:
    <!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>
    Code:
    <!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. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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. #11
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.
    ...and it won't "break" if the users zoom their text.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ronpat View Post
    ...and it won't "break" if the users zoom their text.
    True 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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •