stretch the image

Discussion in 'HTML' started by Mr. X., Sep 13, 2008.

  1. Mr. X.

    Mr. X. Guest

    Hello.
    How can I stretch the image :
    <img src= ... />

    Thanks :)
     
    Mr. X., Sep 13, 2008
    #1
    1. Advertising

  2. Mr. X.

    Ari Heino Guest

    > ... Stretch the image :
    > 1. relative to the whole browser.
    > 2. relative to the current page.


    Use <img id="img-id" ... />

    in html and

    #img-id {
    width: 25%; /* or any other relative unit */
    }

    in css.

    Stretching images is IMO a bad idea, but I guess you have a good example
    to give how to use it.

    --
    Ari
    http://users.utu.fi/athein/
     
    Ari Heino, Sep 13, 2008
    #2
    1. Advertising

  3. On 2008-09-13, Ari Heino wrote:
    >> ... Stretch the image :
    >> 1. relative to the whole browser.
    >> 2. relative to the current page.

    >
    > Use <img id="img-id" ... />
    >
    > in html and
    >
    > #img-id {
    > width: 25%; /* or any other relative unit */
    > }
    >
    > in css.
    >
    > Stretching images is IMO a bad idea,


    I disagree. There is nothing wrong with resizing images in the
    browser; however:

    Don't supply a very large image and let the browser shrink it;
    that is a waste of bandwidth and will be slow.

    If you expect an image to be enlarged, check that the image is
    of high enough quality to survive enlargement. (The ImageZoom
    add-on for Firefox is good for testing this.)


    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
     
    Chris F.A. Johnson, Sep 13, 2008
    #3
  4. Mr. X.

    dorayme Guest

    In article <gag6bm$4r5$>,
    "Mr. X." <no_spam_please@nospam_please.com> wrote:

    > Hello.
    > How can I stretch the image :
    > <img src= ... />
    >
    > Thanks :)


    <http://dorayme.890m.com/alt/rel_sizing_100percent_face.html>

    <http://dorayme.890m.com/alt/rel_sizing_100percent.html>

    --
    dorayme
     
    dorayme, Sep 13, 2008
    #4
  5. Mr. X.

    Ari Heino Guest

    > <http://dorayme.890m.com/alt/rel_sizing_100percent_face.html>
    > <http://dorayme.890m.com/alt/rel_sizing_100percent.html>


    In this case it's not a good idea to define both width and height,
    beacause the picture doesn't look good. Use one and let the browser
    define the other.

    --
    Ari
    http://users.utu.fi/athein/
     
    Ari Heino, Sep 14, 2008
    #5
  6. Mr. X.

    Ari Heino Guest

    You gave just the reasons why I think it needs serious consideration.
    One could argue that from point A we conclude you can't shrink images
    and from point B that you can't enlarge them. Is there any other types
    of stretching left?

    --
    Ari
    http://users.utu.fi/athein/
     
    Ari Heino, Sep 14, 2008
    #6
  7. Mr. X.

    dorayme Guest

    In article <gaia0j$2ddv$>,
    Ari Heino <> wrote:

    > > <http://dorayme.890m.com/alt/rel_sizing_100percent_face.html>
    > > <http://dorayme.890m.com/alt/rel_sizing_100percent.html>

    >
    > In this case it's not a good idea to define both width and height,
    > beacause the picture doesn't look good. Use one and let the browser
    > define the other.


    No doubt you are right it would not be good for many pictures in many
    contexts It was a demo for where you want 100% both ways and I grabbed
    it quickly... I had a perfect case once that looked fantastic but people
    grumbled about it.

    You can see it for yourself by opening either of the above in FF
    developer and substituting for the picture: pics/crimson.png

    You might concede that 100% both ways might be ok for a website on funny
    mirrors? <g>

    --
    dorayme
     
    dorayme, Sep 14, 2008
    #7
  8. Mr. X.

    Ari Heino Guest

    > You can see it for yourself by opening either of the above in FF
    > developer and substituting for the picture: pics/crimson.png


    One could achive the same with background image, yes?

    --
    Ari
    http://users.utu.fi/athein/
     
    Ari Heino, Sep 14, 2008
    #8
  9. Mr. X.

    dorayme Guest

    In article <gaibgg$2dso$>,
    Ari Heino <> wrote:

    > > You can see it for yourself by opening either of the above in FF
    > > developer and substituting for the picture: pics/crimson.png

    >
    > One could achieve the same with a background image, yes?


    It would look for all the world the same to a human, yes. (But not to
    me.)

    Here is a pic that stretches pretty good widthwise while holding a fixed
    height (it looks worse if the height is left to the browser to adjust
    from the native proportions)

    <http://dorayme.890m.com/alt/rel_sizing_100percent_but_fixed_height.html>

    Just occasionally a pic as a pic rather than a background image can be
    suitable for a banner for such stretching effect. Background images can
    also be used but they are often more trouble to concoct. What I
    sometimes like doing is having a fixed image and a background where the
    latter is some blander section of the right hand side of the fixed image
    and able to be repeated in the horizontal direction to give a reasonably
    natural effect. The above is not an example of this.

    --
    dorayme
     
    dorayme, Sep 14, 2008
    #9
  10. Mr. X.

    David Segall Guest

    "Chris F.A. Johnson" <> wrote:

    >On 2008-09-13, Ari Heino wrote:
    >>> ... Stretch the image :
    >>> 1. relative to the whole browser.
    >>> 2. relative to the current page.

    >>
    >> Use <img id="img-id" ... />
    >>
    >> in html and
    >>
    >> #img-id {
    >> width: 25%; /* or any other relative unit */
    >> }
    >>
    >> in css.
    >>
    >> Stretching images is IMO a bad idea,

    >
    > I disagree. There is nothing wrong with resizing images in the
    > browser; however:
    >
    > Don't supply a very large image and let the browser shrink it;
    > that is a waste of bandwidth and will be slow.
    >
    > If you expect an image to be enlarged, check that the image is
    > of high enough quality to survive enlargement. (The ImageZoom
    > add-on for Firefox is good for testing this.)

    Doesn't the above advice imply that you should start with the minimum
    acceptable quality image at the expected _maximum_ size?
     
    David Segall, Sep 14, 2008
    #10
  11. On 2008-09-14, Ari Heino wrote:
    >> I disagree. There is nothing wrong with resizing images in the
    >> browser; however:
    >>
    >> Don't supply a very large image and let the browser shrink it;
    >> that is a waste of bandwidth and will be slow.
    >>
    >> If you expect an image to be enlarged, check that the image is
    >> of high enough quality to survive enlargement. (The ImageZoom
    >> add-on for Firefox is good for testing this.)


    [I assume you were replying to my post, so I have quoted it for
    reference.]

    > You gave just the reasons why I think it needs serious consideration.
    > One could argue that from point A we conclude you can't shrink images


    That's not what I said. Note the words "very large". I wouldn't
    supply an inage 1600x1200 for display in the 300-500 range. I might
    use a 600-wide,

    > and from point B that you can't enlarge them.


    That's not what I said, either. I said to check whether the image
    survives enlargement. If it does, use it; if not, don't.

    > Is there any other types
    > of stretching left?




    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
     
    Chris F.A. Johnson, Sep 14, 2008
    #11
  12. On 2008-09-14, David Segall wrote:
    > "Chris F.A. Johnson" <> wrote:
    >
    >>On 2008-09-13, Ari Heino wrote:
    >>>> ... Stretch the image :
    >>>> 1. relative to the whole browser.
    >>>> 2. relative to the current page.
    >>>
    >>> Use <img id="img-id" ... />
    >>>
    >>> in html and
    >>>
    >>> #img-id {
    >>> width: 25%; /* or any other relative unit */
    >>> }
    >>>
    >>> in css.
    >>>
    >>> Stretching images is IMO a bad idea,

    >>
    >> I disagree. There is nothing wrong with resizing images in the
    >> browser; however:
    >>
    >> Don't supply a very large image and let the browser shrink it;
    >> that is a waste of bandwidth and will be slow.
    >>
    >> If you expect an image to be enlarged, check that the image is
    >> of high enough quality to survive enlargement. (The ImageZoom
    >> add-on for Firefox is good for testing this.)

    >
    > Doesn't the above advice imply that you should start with the minimum
    > acceptable quality image at the expected _maximum_ size?


    Why futz around with an image that already works?

    --
    Chris F.A. Johnson, webmaster <http://Woodbine-Gerrard.com>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
     
    Chris F.A. Johnson, Sep 14, 2008
    #12
  13. Mr. X.

    Nik Coughlin Guest

    "Ari Heino" <> wrote in message
    news:gagcf4$1snc$...
    >> ... Stretch the image :
    >> 1. relative to the whole browser.
    >> 2. relative to the current page.

    >
    > Use <img id="img-id" ... />
    >
    > in html and
    >
    > #img-id {
    > width: 25%; /* or any other relative unit */
    > }
    >
    > in css.
    >
    > Stretching images is IMO a bad idea, but I guess you have a good example
    > to give how to use it.


    Actually, sometimes it's a very good idea, to ensure that an image which is
    fixed width by nature (px) can never escape it's variable width (em, % etc)
    parent container

    #img-id {
    max-width: 100%;
    }

    As the page authour you know that most of the time the parent will be big
    enough to contain the image but when it isn't max-width assures that it
    scales appropriately.

    In reality it's a little more complex than the example above, due to
    non-compliance from everybody's favourite browser and also because some
    browsers don't see fit to maintain the image's aspect ratio when only
    max-width is set (without a little more work anyway), but other than those
    caveats it is a sound technique.
     
    Nik Coughlin, Sep 14, 2008
    #13
  14. Mr. X.

    Ari Heino Guest

    >> Stretching images is IMO a bad idea, but I guess you have a good
    >> example to give how to use it.

    >
    > Actually, sometimes it's a very good idea, to ensure that an image which
    > is fixed width by nature (px) can never escape it's variable width (em,
    > % etc) parent container


    Yep, that IS a good idea indeed. Problematic with IE, though, as you said.

    --
    Ari
    http://users.utu.fi/athein/
     
    Ari Heino, Sep 15, 2008
    #14
  15. Mr. X.

    Mr. X. Guest

    What about :
    stretching the image when it is a background-image in div.

    div1
    {
    position:absolute;
    top:0px;
    left:500px;
    width:100%;
    height:100%;
    background-image:url('images/my_img.jpg');
    background-repeat:no-repeat;
    background-size:auto;
    }

    What should I do in order the background-image will be 50% width & height ?

    Thanks :)
     
    Mr. X., Sep 19, 2008
    #15
  16. Mr. X.

    Els Guest

    Mr. X. wrote:

    > What about :
    > stretching the image when it is a background-image in div.


    Impossible. We have said so in some replies in this thread.

    --
    Els http://locusmeus.com/
     
    Els, Sep 19, 2008
    #16
  17. Mr. X.

    dorayme Guest

    In article <gb17uc$p5t$>,
    "Mr. X." <no_spam_please@nospam_please.com> wrote:

    > What about :
    > stretching the image when it is a background-image in div.
    >
    > div1
    > {
    > position:absolute;
    > top:0px;
    > left:500px;
    > width:100%;
    > height:100%;
    > background-image:url('images/my_img.jpg');
    > background-repeat:no-repeat;
    > background-size:auto;
    > }
    >
    > What should I do in order the background-image will be 50% width & height ?
    >
    > Thanks :)


    Hi Mr X, I am fascinated by your Question Campaign. A storm of rapid
    fire in many newsgroups (I am sure I saw you in Photoshop too?). <g>

    A tip, and it applies to the present question, do have a look at the
    past posts on the subjects of your interest. I recall quite a few that
    have dealt with stretching questions.

    May I suggest you take a break from absolute positioning, it is a tricky
    tool and it is best to master other more common and useful fundamentals
    first.

    Usually, when you want a stretching effect via background images, you
    use repeat in the direction you want to give the appearance of
    stretching. But you cannot stretch a background image in the real sense
    that you stretch a foreground one via <img... width="100" ...>. The
    image you use in a background has a natural size and it will be that
    size, you can repeat it or not.

    But there are all sorts of tricks and controls you can employ with both
    foreground and background images. Depending on the nature of the pic,
    you can certainly sometimes give the appearance of stretching and even
    position such images:

    <http://netweaver.com.au/centring/page5.html>

    --
    dorayme
     
    dorayme, Sep 19, 2008
    #17
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jim McGivney - Office

    Image Box - stretch

    Jim McGivney - Office, Aug 8, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    598
    Jim McGivney - Office
    Aug 8, 2005
  2. Lee Harris
    Replies:
    9
    Views:
    17,015
    Lee Harris
    Jan 9, 2004
  3. Guybrush Threepwood

    image does not stretch container

    Guybrush Threepwood, Dec 29, 2005, in forum: HTML
    Replies:
    0
    Views:
    450
    Guybrush Threepwood
    Dec 29, 2005
  4. Water Cooler v2
    Replies:
    3
    Views:
    37,057
    Water Cooler v2
    Jul 12, 2006
  5. John
    Replies:
    1
    Views:
    599
    richard
    Oct 6, 2006
Loading...

Share This Page