limit image size

Discussion in 'HTML' started by Nikko, Jun 22, 2006.

  1. Nikko

    Nikko Guest

    Hi,
    Is it possible to do this with css?
    I want to limit height image to a certain value:
    If the original image's height is larger than desired value, show image
    with height equals to desired value.
    If the original image's height is smaller than desired value, do nothing
    and show image with this original height size.

    thank in advance for your help.
    Nikko
     
    Nikko, Jun 22, 2006
    #1
    1. Advertising

  2. Nikko

    jojo Guest

    Nikko schrieb:
    > Hi,
    > Is it possible to do this with css?
    > I want to limit height image to a certain value:
    > If the original image's height is larger than desired value, show image
    > with height equals to desired value.
    > If the original image's height is smaller than desired value, do nothing
    > and show image with this original height size.
    >
    > thank in advance for your help.
    > Nikko


    img {max-height:50px;}

    But it doesn't work with all browsers... I do not know which browsers do
    support max-height and which do not. But AFAIK ie doesn't support it yet.
     
    jojo, Jun 22, 2006
    #2
    1. Advertising

  3. Nikko wrote:
    > Hi,
    > Is it possible to do this with css?
    > I want to limit height image to a certain value:
    > If the original image's height is larger than desired value, show image
    > with height equals to desired value.
    > If the original image's height is smaller than desired value, do nothing
    > and show image with this original height size.


    Yes but don't. Please resample your images to the exact pixel dimension
    you require. Scaling images rather than resampling them means that even
    though they may appear smaller on the page you are still downloading the
    *whole full-size* image. Secondly the rescaling done by the browser is
    far poorer than the results from resampling the image, so it will look
    bad as well. Nothing stalls a dialup connection more than a page full of
    "thumbnails" that are 1000+ pixel images just scaled on the page!

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jun 22, 2006
    #3
  4. Nikko

    Nikko Guest

    Thanks for your answer
    Yes, you're right, I tried max-height, and it works with firefox but not IE.
    Do you know a max-height workaround for IE with img tag?


    jojo wrote:
    > Nikko schrieb:
    >> Hi,
    >> Is it possible to do this with css?
    >> I want to limit height image to a certain value:
    >> If the original image's height is larger than desired value, show
    >> image with height equals to desired value.
    >> If the original image's height is smaller than desired value, do
    >> nothing and show image with this original height size.
    >>
    >> thank in advance for your help.
    >> Nikko

    >
    > img {max-height:50px;}
    >
    > But it doesn't work with all browsers... I do not know which browsers do
    > support max-height and which do not. But AFAIK ie doesn't support it yet.
     
    Nikko, Jun 23, 2006
    #4
  5. Nikko

    Nikko Guest

    Hi jonathan, I agree completely with you but I can't change image size.

    Jonathan N. Little wrote:
    > Nikko wrote:
    >> Hi,
    >> Is it possible to do this with css?
    >> I want to limit height image to a certain value:
    >> If the original image's height is larger than desired value, show
    >> image with height equals to desired value.
    >> If the original image's height is smaller than desired value, do
    >> nothing and show image with this original height size.

    >
    > Yes but don't. Please resample your images to the exact pixel dimension
    > you require. Scaling images rather than resampling them means that even
    > though they may appear smaller on the page you are still downloading the
    > *whole full-size* image. Secondly the rescaling done by the browser is
    > far poorer than the results from resampling the image, so it will look
    > bad as well. Nothing stalls a dialup connection more than a page full of
    > "thumbnails" that are 1000+ pixel images just scaled on the page!
    >
     
    Nikko, Jun 23, 2006
    #5
  6. Nikko wrote:
    Please don't top post.

    > Hi jonathan, I agree completely with you but I can't change image size.


    Why not?

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jun 23, 2006
    #6
  7. Nikko

    Philip Guest

    In article <>,
    Nikko <> wrote:
    > jojo wrote:
    > > Nikko schrieb:
    > >> Hi,
    > >> Is it possible to do this with css?
    > >> I want to limit height image to a certain value:
    > >> If the original image's height is larger than desired value, show
    > >> image with height equals to desired value.
    > >> If the original image's height is smaller than desired value, do
    > >> nothing and show image with this original height size.
    > >>
    > >> thank in advance for your help.
    > >> Nikko

    > >
    > > img {max-height:50px;}
    > >
    > > But it doesn't work with all browsers... I do not know which browsers do
    > > support max-height and which do not. But AFAIK ie doesn't support it yet.

    >
    > Thanks for your answer
    > Yes, you're right, I tried max-height, and it works with firefox but not IE.
    > Do you know a max-height workaround for IE with img tag?


    You can simply set the height as an attribute of the image element:
    <img src="foo.jpg" height="50">

    But I think that will not preserve the aspect ratio (i.e. your pictures
    will look squashed), not to mention the scaling problems mentioned
    earlier in this thread.

    If you're using a scripting language to build these pages, you can
    probably use some functions to get the dimensions of the image and then
    set the height and width accordingly on the image tag. e.g. if your
    image is 300x500, you could write an image tag like so:
    <img src="foo.jpg" width="30" height="50">

    That would preserve the aspect ratio.

    FYI, top posting often makes people in this group less inclined to help.
    Here's a reference in case you're unfamiliar with it:
    http://en.wikipedia.org/wiki/Top_posting

    HTH

    --
    Philip
    http://NikitaTheSpider.com/
    Bulk HTML validation, link checking and more
     
    Philip, Jun 23, 2006
    #7
  8. Nikko

    jojo Guest

    Philip schrieb:

    >>>> Hi,
    >>>> Is it possible to do this with css?
    >>>> I want to limit height image to a certain value:
    >>>> If the original image's height is larger than desired value, show
    >>>> image with height equals to desired value.
    >>>> If the original image's height is smaller than desired value, do
    >>>> nothing and show image with this original height size.
    >>>>
    >>>> thank in advance for your help.
    >>>> Nikko
    >>> img {max-height:50px;}
    >>>
    >>> But it doesn't work with all browsers... I do not know which browsers do
    >>> support max-height and which do not. But AFAIK ie doesn't support it yet.

    >> Thanks for your answer
    >> Yes, you're right, I tried max-height, and it works with firefox but not IE.
    >> Do you know a max-height workaround for IE with img tag?

    >
    > You can simply set the height as an attribute of the image element:
    > <img src="foo.jpg" height="50">


    I'm sorry, but i have to correct you: Nikko wanted the image not to be
    scaled if it's smaller than the desired value, but this would always
    size it 50px, no matter what the original size is.

    >
    > But I think that will not preserve the aspect ratio (i.e. your pictures
    > will look squashed), not to mention the scaling problems mentioned
    > earlier in this thread.


    Right, but this problem doesn't depend on how you scale it, just the
    fact *that* you scale it will do it.

    >
    > If you're using a scripting language to build these pages, you can
    > probably use some functions to get the dimensions of the image and then
    > set the height and width accordingly on the image tag. e.g. if your
    > image is 300x500, you could write an image tag like so:
    > <img src="foo.jpg" width="30" height="50">


    Yes, would be a solution. Can do it both, on server-side (PHP for
    example) or client-side (JavaScript).

    >
    > That would preserve the aspect ratio.
    >
    > FYI, top posting often makes people in this group less inclined to help.
    > Here's a reference in case you're unfamiliar with it:
    > http://en.wikipedia.org/wiki/Top_posting


    Always the same... ;-)

    >
    > HTH
    >
     
    jojo, Jun 25, 2006
    #8
    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. Ben

    File size limit?

    Ben, Nov 12, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    464
  2. Jim McGivney

    Image size limit

    Jim McGivney, Nov 11, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    730
    Lau Lei Cheong
    Nov 11, 2005
  3. Replies:
    1
    Views:
    1,132
    Victor Bazarov
    Jun 28, 2005
  4. Jason Cavett

    Preferred Size, Minimum Size, Size

    Jason Cavett, May 23, 2008, in forum: Java
    Replies:
    5
    Views:
    12,734
    Michael Jung
    May 25, 2008
  5. Bob Richardson
    Replies:
    3
    Views:
    257
    Bob Richardson
    Mar 8, 2005
Loading...

Share This Page