#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    3
    Rep Power
    0

    Image resizing in a cell [CSS or HTML?]


    I'm looking to do a site redesign. I'm a fan of being subtle, so I don't like to go overboard w/ graphics and the such. However, I have a pretty cool design idea that I'm throwing around [I still have a lot to do], and here is my current layout:

    http://www.photochopper.com/redesign3.html

    My problem is this:
    How do I have an image within a cell resize itself to fit inside the cell w/o having the cell resize to fit the image? For example, say if I have a 215x100 cell, and the image is 100x100, how would I get it so that it stretches to fit the cell? Also, at the same time, say if an image was 250x250, how would one go about having it so the image would resize to 215x100 [the size of the cell] instead of making the cell stretch? This is using tables, but I'd imagine this could be accomplished more smoothly w/ CSS. I was just wondering if it could be done w/ tables, if not how would I go about doing it in CSS?
  2. #2
  3. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    If you are satisfied to compress and/or stretch the image, all that is needed is to use the width and height attributes for the img element. The same applies to using CSS. Just alter the syntax. The browser will distort it to fit.

    (If you prefer that your image not be used for this demo, I will remove it.)

    If you want the image to maintain its aspect ratio, you will need to size and crop in your favorite (Gnu) image manipulation program.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    3
    Rep Power
    0
    Originally posted by kk5st
    [B]If you are satisfied to compress and/or stretch the image, all that is needed is to use the width and height attributes for the img element. The same applies to using CSS. Just alter the syntax. The browser will distort it to fit.
    Say if I don't care if it stretches/compresses. I don't want to specify it to be 215 x 100, because on larger resolutions the images will remain small and not proportional to the rest of the page. Is there a way that I can have the images stretch to fit the size of the cell instead of making the cell too big?


    (If you prefer that your image not be used for this demo, I will remove it.)
    It's cool.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    Sao Paulo - Brasil
    Posts
    23
    Rep Power
    0
    i understood now what u said, but i still do not understand why u have this problem with resolution...
    what u can do is, instead of making the table width 70%, change it to a fixed value in pixels.
    ahh, and another thing... plizzz... dont use frontpage... use dreamweaver! =)
  8. #5
  9. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    OK. here's one more try

    cheers,

    gary

    ps.
    and another thing... plizzz... dont use frontpage... use dreamweaver! =)
    Actually, use Emacs, Vim, Cooledit, or another good quality text editor. No wysiwyg editor provides clean, standards compliant code.--gt
    Last edited by kk5st; November 29th, 2003 at 11:21 PM.
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    3
    Rep Power
    0
    [QUOTE]Originally posted by kk5st
    OK. here's one more try

    cheers,

    gary

    ps. Actually, use Emacs, Vim, Cooledit, or another good quality text editor. No wysiwyg editor provides clean, standards compliant code.--gt
    I used to just write the code in Notepad, I stopped doing it as making the overall layout via tables in a wysiwyg program cut down on redundant code writing. I might have to start doing it again though.
    Last edited by LookitsPuck; November 30th, 2003 at 07:23 PM.

IMN logo majestic logo threadwatch logo seochat tools logo