Skip navigation
Konstantinos Terzopoulos
Konstantinos Terzopoulos
Currently Being Moderated

image in fluid layout

Sep 12, 2012 1:08 PM

Hi!

 

If I have a small image in a fluid layout column which is the best practice for having the image's width adjust to the column width while still remaining proportional with its height?

 

Thanks!

kt

721 Views   8 Replies   Latest reply: Konstantinos Terzopoulos, Sep 13, 2012 10:33 AM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Sep 12, 2012 3:01 PM   in reply to Konstantinos Terzopoulos
    Report

    If your container is % based, you might try adding this to your CSS:

     

    img {max-width: 100%;}

     

    Also, don't give the image any HTML size attributes as this will default the CSS rule above.

     

    <img src="some_image.jpg" alt="description">

     

     

    Nancy O.

     
    |
    Mark as:
  • Konstantinos Terzopoulos
    Currently Being Moderated
    2. Konstantinos Terzopoulos,
    Sep 12, 2012 9:47 PM   in reply to Nancy O.
    Report

    very helpful, but it is not sizing out to 100% for the column.

     

    am i missing something?

     

    kt

    P.S. http://www.psaltiki.org/index_new.html

     
    |
    Mark as:
  • mytaxsite.co.uk
    Currently Being Moderated
    3. mytaxsite.co.uk,
    Sep 12, 2012 10:32 PM   in reply to Konstantinos Terzopoulos
    Report

    I am not sure about fixed height but to scale your image to your DIV width then this CSS will work?:

     

     

    img {

        width: inherit;

    }

     

    I suspect the height will also scale proportionately but another method is to use JavaScript which is for another forum to deal with.  This one is for pure DW.

     

    Your HTML might look like this:

     

     


    		<img alt="pict01" src="http://www.psaltiki.org/_images/hagios_cover_small.jpg">

    		<img alt="pict02" height="300px" src="sinai_syrmatiki.jpg">

     

    The second image contains a constrained height with a width of inherited from your DIV.

     
    |
    Mark as:
  • Konstantinos Terzopoulos
    Currently Being Moderated
    4. Konstantinos Terzopoulos,
    Sep 12, 2012 10:35 PM   in reply to mytaxsite.co.uk
    Report

    still not doing the trick for some reason.

     

    a stumper…

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    5. Nancy O.,
    Sep 13, 2012 8:29 AM   in reply to Konstantinos Terzopoulos
    Report

    Change this:

     

    <p align="center"><a href="cd/index.html"><img name="paraklesis_cover.jpg" src="/_images/paraklesis_cover_small.jpg" alt="Paraklesis CD cover" height="200" width="200"></p>

     

    to this:

     

    <p style="text-align:"center"><a href="cd/index.html"><img name="paraklesis_cover.jpg" src="/_images/paraklesis_cover_small.jpg" alt="Paraklesis CD cover"></p>

     

    HINT: resizing will be more noticeable with a slightly larger image.  200 x 200 is not very big.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Konstantinos Terzopoulos
    Currently Being Moderated
    6. Konstantinos Terzopoulos,
    Sep 13, 2012 10:01 AM   in reply to Nancy O.
    Report

    thanks for the tips; i know 'align' is no longer 'in', but the code on the page is old.

     

    anyway, that is not the image I want to fix. it is the one that begins the left hand column (Div2).

     

    my earlier image was much smaller(240x230); what i have done now it put in a larger image (sinai_syrmatiki_lrg.jpg). it is big enough to cover how wide someone would reasonably open their browser, but I am still not happy.

     

    i would rather have the smaller image which has more detail and have it resize to that full left-hand column width

     

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    7. Nancy O.,
    Sep 13, 2012 10:15 AM   in reply to Konstantinos Terzopoulos
    Report

    Images are static by nature so when you re-scale them, some distortion and loss of picture quality are inevitable.

     

     

    Nancy O.

     
    |
    Mark as:
  • Konstantinos Terzopoulos
    Currently Being Moderated
    8. Konstantinos Terzopoulos,
    Sep 13, 2012 10:33 AM   in reply to Nancy O.
    Report

    again, thanks!

     

    seems to be working well enough… for an amateur!

     

    kt

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points