Image not resized to browser window

Discussion in 'HTML' started by Don, Oct 21, 2006.

  1. Don

    Don Guest

    How do I make a large image be resized so it all fits in the browser
    window? I've found I.E.'s "Enable Automatic Image Resizing" setting
    works if the image is opened via a link directly to the picture. Or, if
    the image is opened in the browser with "File, Open".

    However, if the image is CONTAINED WITHIN its own HTML page, with "<img
    src" tag, it does not work!! Is this just me? Very simply, if I have a
    page:

    <html>
    <head>
    <title>IMG_1981</title>
    </head>
    <body>
    <img src="IMG_1981.jpg">
    </body>
    </html>

    then image resizing does NOT work! How can I get resizing to work in
    this page? I do NOT want to specify any particular size, rather I want
    the image to be resized to be fully contained in the browser window,
    however big the window is.

    Many thanks in advance!
    Don, Oct 21, 2006
    #1
    1. Advertising

  2. Don

    mbstevens Guest

    Don wrote:
    > How do I make a large image be resized so it all fits in the browser
    > window? I've found I.E.'s "Enable Automatic Image Resizing" setting
    > works if the image is opened via a link directly to the picture. Or, if
    > the image is opened in the browser with "File, Open".
    >
    > However, if the image is CONTAINED WITHIN its own HTML page, with "<img
    > src" tag, it does not work!! Is this just me? Very simply, if I have a
    > page:
    >
    > <html>
    > <head>
    > <title>IMG_1981</title>
    > </head>
    > <body>
    > <img src="IMG_1981.jpg">
    > </body>
    > </html>
    >
    > then image resizing does NOT work! How can I get resizing to work in
    > this page? I do NOT want to specify any particular size,


    ....bad idea...

    > rather I want
    > the image to be resized to be fully contained in the browser window,
    > however big the window is.
    >
    > Many thanks in advance!


    You make the image the size it should be in
    your imaging software (Gimp, Photoshop,
    etc.). There are drawbacks to allowing
    browsers to resize images.
    --
    mbstevens
    http://www.mbstevens.com/howtothumb
    mbstevens, Oct 21, 2006
    #2
    1. Advertising

  3. Don

    dorayme Guest

    In article <>,
    Don <> wrote:

    > How do I make a large image be resized so it all fits in the browser
    > window? I've found I.E.'s "Enable Automatic Image Resizing" setting
    > works if the image is opened via a link directly to the picture. Or, if
    > the image is opened in the browser with "File, Open".
    >
    > However, if the image is CONTAINED WITHIN its own HTML page, with "<img
    > src" tag, it does not work!! Is this just me? Very simply, if I have a
    > page:
    >
    > <html>
    > <head>
    > <title>IMG_1981</title>
    > </head>
    > <body>
    > <img src="IMG_1981.jpg">
    > </body>
    > </html>
    >
    > then image resizing does NOT work! How can I get resizing to work in
    > this page? I do NOT want to specify any particular size, rather I want
    > the image to be resized to be fully contained in the browser window,
    > however big the window is.
    >
    > Many thanks in advance!


    Try this and tell me if it works:

    <html>
    <head>
    <title>IMG_1981</title>
    </head>
    <body>
    <img style="width:100%;" src="IMG_1981.jpg">
    </body>
    </html>

    (I assume landscape and width is most important dim)

    --
    dorayme
    dorayme, Oct 21, 2006
    #3
  4. Don

    Don Guest

    dorayme wrote:
    >
    > In article <>,
    > Don <> wrote:
    >
    > > How do I make a large image be resized so it all fits in the browser
    > > window? I've found I.E.'s "Enable Automatic Image Resizing" setting
    > > works if the image is opened via a link directly to the picture. Or, if
    > > the image is opened in the browser with "File, Open".
    > >
    > > However, if the image is CONTAINED WITHIN its own HTML page, with "<img
    > > src" tag, it does not work!! Is this just me? Very simply, if I have a
    > > page:
    > >
    > > <html>
    > > <head>
    > > <title>IMG_1981</title>
    > > </head>
    > > <body>
    > > <img src="IMG_1981.jpg">
    > > </body>
    > > </html>
    > >
    > > then image resizing does NOT work! How can I get resizing to work in
    > > this page? I do NOT want to specify any particular size, rather I want
    > > the image to be resized to be fully contained in the browser window,
    > > however big the window is.
    > >
    > > Many thanks in advance!

    >
    > Try this and tell me if it works:
    >
    > <html>
    > <head>
    > <title>IMG_1981</title>
    > </head>
    > <body>
    > <img style="width:100%;" src="IMG_1981.jpg">
    > </body>
    > </html>
    >
    > (I assume landscape and width is most important dim)
    >
    > --
    > dorayme



    It works! You are golden, many thanks!!
    Don, Oct 21, 2006
    #4
  5. Don

    Don Guest

    mbstevens wrote:
    >
    > Don wrote:
    > > How do I make a large image be resized so it all fits in the browser
    > > window? I've found I.E.'s "Enable Automatic Image Resizing" setting
    > > works if the image is opened via a link directly to the picture. Or, if
    > > the image is opened in the browser with "File, Open".
    > >
    > > However, if the image is CONTAINED WITHIN its own HTML page, with "<img
    > > src" tag, it does not work!! Is this just me? Very simply, if I have a
    > > page:
    > >
    > > <html>
    > > <head>
    > > <title>IMG_1981</title>
    > > </head>
    > > <body>
    > > <img src="IMG_1981.jpg">
    > > </body>
    > > </html>
    > >
    > > then image resizing does NOT work! How can I get resizing to work in
    > > this page? I do NOT want to specify any particular size,

    >
    > ...bad idea...
    >
    > > rather I want
    > > the image to be resized to be fully contained in the browser window,
    > > however big the window is.
    > >
    > > Many thanks in advance!

    >
    > You make the image the size it should be in
    > your imaging software (Gimp, Photoshop,
    > etc.). There are drawbacks to allowing
    > browsers to resize images.
    > --
    > mbstevens
    > http://www.mbstevens.com/howtothumb


    And the drawbacks are...? Why do you say this? Here's my motivation:
    I made a 'home' page with links to pages containing the images. Each of
    the image pages contain 'next', 'previous' buttons so it can function as
    a slide show, which is why I can't make the home page link directly to
    the pictures. I want to put all this on a CD to give to friends, but I
    want to include the FULL resolution images in case they want to make
    large prints, which is why I don't want to set any particular image
    size. ALSO, the images will appear full-screen (IE maximized) for
    whatever display resolution they have.
    Don, Oct 21, 2006
    #5
  6. Don

    dorayme Guest

    In article <>,
    Don <> wrote:

    > > You make the image the size it should be in
    > > your imaging software (Gimp, Photoshop,
    > > etc.). There are drawbacks to allowing
    > > browsers to resize images.
    > > --
    > > mbstevens
    > > http://www.mbstevens.com/howtothumb

    >
    > And the drawbacks are...?


    One of them is that the resizing algorithms of browsers (which
    have to work quickly) have not generally been as good as those in
    good image manipulation programs (like Photoshop).

    Another is that pics generally look shithouse when upped up from
    their natural size (the size they are saved in) and you can't
    know how big someone's screen might be.

    But if you know these limitations and you judge there are overall
    benefits, I can't condemn you. And that is what is most
    important. What I think.

    (All of today I have been either suffering or enjoying
    particularly strong illusions of grandeur)

    --
    dorayme
    dorayme, Oct 21, 2006
    #6
  7. Don

    mbstevens Guest

    Don wrote:

    >
    > And the drawbacks are...? Why do you say this? Here's my motivation:
    > I made a 'home' page with links to pages containing the images. Each of
    > the image pages contain 'next', 'previous' buttons so it can function as
    > a slide show, which is why I can't make the home page link directly to
    > the pictures. I want to put all this on a CD to give to friends,


    If it will never appear on the net, letting
    the browser resize is not quite so bad, but I
    still would not do it unless you are also
    sure that everyone you distribute the CDs to
    also have a browser that resizes images in a
    way that looks good and that maintains the
    aspect ratio.

    > but I
    > want to include the FULL resolution images in case they want to make
    > large prints, which is why I don't want to set any particular image
    > size.


    I would make a set of images reduced to the
    same width and have a printing link to the
    full sized image. Your pages will fail
    validation without a width and height set.

    > ALSO, the images will appear full-screen (IE maximized) for
    > whatever display resolution they have.


    Not unless they allow their browser windows
    to be maximized. Are you playing around with
    jscript to maximize their windows without
    their permission? That would be a bad idea.
    They might have different ideas about how
    large their browser windows should be.
    Better to make reduced images that are small
    enough to display in even a reasonably small
    browser window.
    --
    mbstevens
    http://www.mbstevens.com/howtothumb
    mbstevens, Oct 21, 2006
    #7
  8. Don

    dorayme Guest

    In article <>,
    Don <> wrote:

    > And the drawbacks are...?


    Another drawback, if you put up big photos then you disadvantage
    people who either have very small screens, low bandwidth or who
    are happy to see them a reasonable small size. It works like
    this: you can put up a massive pic and it will resize by the
    browser either with the style I gave you or in other ways (there
    are situations when you can base the width and height on ems
    according to the px proportions of the native size) not to badly
    if it is viewed with less pixels than native. But the big file
    still has to be downloaded to the punters machine, the poor
    fellow on dialup or small screen is getting more than he wants
    for hs purpose.

    You can easily solve the problem of giving everyone what they
    want by ensuring you offer different sizes and making this plain.
    For big files, best to make it clear they can download it for
    printing (don't lay it into the page, except for a link to it).
    Thumbnails and moderate sizes for enlargements for the average
    we\bsite, say 100px square and 500px square as a rough guide.
    Anything much bigger, I would take heed of what mb says.

    --
    dorayme
    dorayme, Oct 21, 2006
    #8
  9. Don

    mbstevens Guest

    dorayme wrote:

    > You can easily solve the problem of giving everyone what they
    > want by ensuring you offer different sizes and making this plain.
    > For big files, best to make it clear they can download it for
    > printing (don't lay it into the page, except for a link to it).
    > Thumbnails and moderate sizes for enlargements for the average
    > we\bsite, say 100px square and 500px square as a rough guide.
    > Anything much bigger, I would take heed of what mb says.
    >


    Also, 'previous' - 'next' links are often
    useful for truly serial things like stories
    and articles. But if you do not really need
    to control the visitor's experience, it would
    be better to present thumbnails on a single
    page and let the visitor choose which
    enlargements s/he wants to see in the order
    they want to see them.

    For example, there must be thousands of
    photographer sites on the net that would be
    better off without 'previous' - 'next' links.
    It is really irritating to have the
    photographer's sequencing forced onto you.
    Other kinds of art sites also often try to
    herd the visitor. I often give up on even
    fine work because I get tired of being forced
    into a sequence.
    mbstevens, Oct 21, 2006
    #9
  10. Don

    dorayme Guest

    In article
    <eHg_g.16761$>,
    mbstevens <> wrote:

    > dorayme wrote:
    >
    > > You can easily solve the problem of giving everyone what they
    > > want by ensuring you offer different sizes and making this plain.
    > > For big files, best to make it clear they can download it for
    > > printing (don't lay it into the page, except for a link to it).
    > > Thumbnails and moderate sizes for enlargements for the average
    > > we\bsite, say 100px square and 500px square as a rough guide.
    > > Anything much bigger, I would take heed of what mb says.
    > >

    >
    > Also, 'previous' - 'next' links are often
    > useful for truly serial things like stories
    > and articles. But if you do not really need
    > to control the visitor's experience, it would
    > be better to present thumbnails on a single
    > page and let the visitor choose which
    > enlargements s/he wants to see in the order
    > they want to see them.
    >
    > For example, there must be thousands of
    > photographer sites on the net that would be
    > better off without 'previous' - 'next' links.
    > It is really irritating to have the
    > photographer's sequencing forced onto you.
    > Other kinds of art sites also often try to
    > herd the visitor. I often give up on even
    > fine work because I get tired of being forced
    > into a sequence.


    Good point. Photoshop back in version 6 was aware of it and in
    their (tables based) photo gallery auto feature generated
    thumbnails for the index pages and on each page of the
    enlargement was a forward and back button, and an "up" arrow
    button to go back to the index pages.

    --
    dorayme
    dorayme, Oct 21, 2006
    #10
  11. On 2006-10-21, mbstevens wrote:
    > dorayme wrote:
    >
    >> You can easily solve the problem of giving everyone what they
    >> want by ensuring you offer different sizes and making this plain.
    >> For big files, best to make it clear they can download it for
    >> printing (don't lay it into the page, except for a link to it).
    >> Thumbnails and moderate sizes for enlargements for the average
    >> we\bsite, say 100px square and 500px square as a rough guide.
    >> Anything much bigger, I would take heed of what mb says.
    >>

    >
    > Also, 'previous' - 'next' links are often
    > useful for truly serial things like stories
    > and articles. But if you do not really need
    > to control the visitor's experience, it would
    > be better to present thumbnails on a single
    > page and let the visitor choose which
    > enlargements s/he wants to see in the order
    > they want to see them.
    >
    > For example, there must be thousands of
    > photographer sites on the net that would be
    > better off without 'previous' - 'next' links.
    > It is really irritating to have the
    > photographer's sequencing forced onto you.
    > Other kinds of art sites also often try to
    > herd the visitor. I often give up on even
    > fine work because I get tired of being forced
    > into a sequence.


    The existence of a sequence does not force you into it unless you
    choose to use it.

    --
    Chris F.A. Johnson <http://cfaj.freeshell.org>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
    Chris F.A. Johnson, Oct 21, 2006
    #11
  12. Don

    dorayme Guest

    In article <>,
    "Chris F.A. Johnson" <> wrote:

    > The existence of a sequence does not force you into it unless you
    > choose to use it.


    I think that mb (no, I am sorry, I can't let him speak for
    himself, he might not get his thoughts about it quite right and
    that is why I am here on earth) means it is an irritation to go
    to a pic, like it, go to a few more, start to be a bit
    uncomfortable that it would be nice to have some choice to skip
    some of these things... in other words one can get sucked in.
    This choice argument is used a lot by (very) free marketeers...

    :)

    --
    dorayme
    dorayme, Oct 21, 2006
    #12
  13. Don

    Spartanicus Guest

    Don <> wrote:

    [big snip]

    Please snip quotes down to a minimum.

    >> > then image resizing does NOT work! How can I get resizing to work in
    >> > this page? I do NOT want to specify any particular size,

    >>
    >> ...bad idea...

    >
    >And the drawbacks are...?


    Browsers typically do a poor job at resizing, your images are likely to
    look poor when you code so that they do that.

    >Why do you say this? Here's my motivation:
    >I made a 'home' page with links to pages containing the images. Each of
    >the image pages contain 'next', 'previous' buttons so it can function as
    >a slide show, which is why I can't make the home page link directly to
    >the pictures.


    You can create both an index page with thumbnails and a Previous & Next
    links beneath the target pages. If that sounds like a lot of work, there
    are plenty of programs out there that can generate such automatically.

    >I want to put all this on a CD to give to friends, but I
    >want to include the FULL resolution images in case they want to make
    >large prints, which is why I don't want to set any particular image
    >size.


    Apart from the quality argument, full resolution images such as
    typically made by a digital camera can use a very large amount of memory
    and can be very slow to resize. It would be much better to resize them
    to a reasonable size for your target audience, let's say for desktop
    usage 800px wide, then use a print stylesheet to serve the full
    resolution images. 800px wide images should suit most desktop viewports
    fine, it will also look nice (I'd center the images). Users using a
    viewport width smaller than 800px will get a scrollbar, this is not
    great, but perfectly functional.

    The only reasonable way to also cater for let's say small screen mobile
    devices is to create another set of images aimed at that screen width.
    Again this need not be a lot of work due to the available software.

    You could then let people choose between the various sizes, or select a
    version with Javascript based on their viewport width.

    --
    Spartanicus
    Spartanicus, Oct 21, 2006
    #13
  14. Don

    Spartanicus Guest

    mbstevens <> wrote:

    >I would make a set of images reduced to the
    >same width and have a printing link to the
    >full sized image. Your pages will fail
    >validation without a width and height set.


    The width and height attribute are optional.

    --
    Spartanicus
    Spartanicus, Oct 21, 2006
    #14
  15. Don

    mbstevens Guest

    Spartanicus wrote:
    > mbstevens <> wrote:
    >
    >> I would make a set of images reduced to the
    >> same width and have a printing link to the
    >> full sized image. Your pages will fail
    >> validation without a width and height set.

    >
    > The width and height attribute are optional.
    >

    That depends on the doc type. I wouldn't
    use any doc type so old that it allows you to
    leave them out, and I certainly wouldn't
    write a page with no doc type.
    mbstevens, Oct 21, 2006
    #15
  16. Don

    Spartanicus Guest

    mbstevens <> wrote:

    >>> I would make a set of images reduced to the
    >>> same width and have a printing link to the
    >>> full sized image. Your pages will fail
    >>> validation without a width and height set.

    >>
    >> The width and height attribute are optional.
    >>

    >That depends on the doc type.


    It doesn't.

    --
    Spartanicus
    Spartanicus, Oct 21, 2006
    #16
  17. Don

    mbstevens Guest

    Spartanicus wrote:
    > mbstevens <> wrote:
    >
    >>>> I would make a set of images reduced to the
    >>>> same width and have a printing link to the
    >>>> full sized image. Your pages will fail
    >>>> validation without a width and height set.


    >>> The width and height attribute are optional.
    >>>

    >> That depends on the doc type.

    >
    > It doesn't.
    >

    It does if you want it to validate.
    mbstevens, Oct 21, 2006
    #17
  18. Don

    mbstevens Guest

    dorayme wrote:
    > In article <>,
    > "Chris F.A. Johnson" <> wrote:
    >
    >> The existence of a sequence does not force you into it unless you
    >> choose to use it.

    >
    > I think that mb (no, I am sorry, I can't let him speak for
    > himself, he might not get his thoughts about it quite right and
    > that is why I am here on earth)


    That does it! The black and white prints are
    already in the trunk of Sgt. Bud White's
    sedan. ;)

    > means it is an irritation to go
    > to a pic, like it, go to a few more, start to be a bit
    > uncomfortable that it would be nice to have some choice to skip
    > some of these things... in other words one can get sucked in.
    > This choice argument is used a lot by (very) free marketeers...
    >
    > :)
    >
    mbstevens, Oct 21, 2006
    #18
  19. Don

    patrick j Guest

    On Sat, 21 Oct 2006 03:06:17 +0100, Don wrote
    (in article <>):

    > It works! You are golden, many thanks!!


    dorayme might welll frame your posting and hang it on his wall.

    --
    Patrick
    Brighton, UK

    <http://www.patrickjames.me.uk>
    patrick j, Oct 21, 2006
    #19
  20. Don

    Spartanicus Guest

    mbstevens <> wrote:

    >>>>> I would make a set of images reduced to the
    >>>>> same width and have a printing link to the
    >>>>> full sized image. Your pages will fail
    >>>>> validation without a width and height set.

    >
    >>>> The width and height attribute are optional.
    >>>>
    >>> That depends on the doc type.

    >>
    >> It doesn't.
    >>

    >It does if you want it to validate.


    HTML4.01 Strict:
    http://validator.w3.org/check?uri=http://homepage.ntlworld.ie/spartanicus/401strict.htm
    XHTML1.0 Strict:
    http://validator.w3.org/check?uri=http://homepage.ntlworld.ie/spartanicus/xhtml10strict.htm
    XHTML1.1:
    http://validator.w3.org/check?uri=http://homepage.ntlworld.ie/spartanicus/xhtml11.htm

    Any other "modern doctypes" you want me to demonstrate?

    --
    Spartanicus
    Spartanicus, Oct 21, 2006
    #20
    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. Earl Teigrob
    Replies:
    2
    Views:
    367
    Earl Teigrob
    Feb 20, 2004
  2. Sean Jorden
    Replies:
    1
    Views:
    594
    laurie
    Aug 19, 2003
  3. Replies:
    0
    Views:
    136
  4. Despoina
    Replies:
    2
    Views:
    146
  5. Replies:
    2
    Views:
    89
Loading...

Share This Page