1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

CSS photo from fixed to fluid

Discussion in 'Web Development' started by navyfalcon, Feb 20, 2012.

  1. navyfalcon

    navyfalcon Well-Known Member Verified Member

    StDevFrm

    Attempting to change fixed format on photo to fluid
    (now the width controls the height) - height has no control
    Any suggestions on how to correct this
    [note: I am trying to get this ready to present to "Statistics" math classes.]
    -
    Thank You
    falcon

    was:
    fixed format -
    <img src="../Images/Back%20to%20School.jpg"
    width= "250" height="210" align="left" alt="students">
    -
    now:
    fluid format -
    <img src="../Images/Back%20to%20School.jpg"
    width="30%" height="20%" align="left" alt="students">

    Reference: webpage -
    http://freetutorials.name/Reference1/StDevFrm.html
     
    navyfalcon, Feb 20, 2012
    #1
  2. Geoff Tyrer

    Geoff Tyrer Member

    Hi Falcon,

    Not sure what the problem is... Do you want to control the height as well as the width?

    Wouldn't you want to maintain the aspect ratio?

    From my experimentation (using Firefox 10.0.1) I established the following:

    If you give the containing element a height in pixels then the percentage will be used to determine the height of the photo. But you wouldn't want to do this with whether your layout was fluid or fixed, would you... If you specified a width too the aspect ratio would be lost.

    If you give the containing element a height based on percentage it will be used so long as you don't specify a width. If you specify a width it seems the aspect ratio is respected and the specified height ignored.

    What are you trying to achieve?

    Geoff
     
    Geoff Tyrer, Feb 21, 2012
    #2
  3. overtime

    overtime New Member

    Man why are you using Back%20to%20School?
    better is Back-to-School
     
    overtime, Mar 22, 2012
    #3
  4. tomw

    tomw Member

    ]I guess we’re not all well versed in English like you. The topic in discussion is image formatting. Please share that with us if you have some knowledge in this. Thanks and welcome to FWT.

    Back-to-the-drawing-board for more lessons.
     
    tomw, Mar 22, 2012
    #4
  5. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    It's called Sanitizing Strings to make them URL and filename safe.
    The page title or URL may have invalid characters (spaces, slashes, etc.) so it’s a good habit to encode them before sending them over (spaces become %20, etc.).
    Even WordPress Codex (since 2.8): Always use esc_url when sanitizing URL
    There are even plugins to do just that - The Definitive URL Sanitizer is a simple plugin that really sanitizes posts URL removing many characters not removed by native WP sanitizer, like ¿, “, ” or ’ Very useful for non-english bloggers.
    It's not just Wordpress that Sanitizes Strings, it's well practiced across many programming languages.


    I found this link to be very helpful Fluid Images maybe NF will also.
     
    ishkey, Mar 22, 2012
    #5
  6. navyfalcon

    navyfalcon Well-Known Member Verified Member

    I read the article and will try it
    -
    Thanks ishkey
    -
    falcon
     
    navyfalcon, Mar 24, 2012
    #6
  7. navyfalcon

    navyfalcon Well-Known Member Verified Member

    Found by changing the doc type it corrected the problem (used on another web page with no problems) will be changing doc types to verify the problem is solved.
    -
    Thank You
    falcon
     
    navyfalcon, Jun 10, 2012
    #7