SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Fixing Height of Images

    Hi,

    I am inserting images into DIVS from a database. The images which are tall are over shooting the height of the DIV. I have fixed the width of the image so they dont overshoot the DIV width ways.

    However I am struggling to fit the images in height whys. Can anyone advise how to do this please. Is it possible to fix both height and width so whatever the dimensions of image it will not overshoot the DIV.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by justlukeyou View Post
    Is it possible to fix both height and width so whatever the dimensions of image it will not overshoot the DIV.
    Yes. You can do it via CSS, such as

    Code:
    img {width: 100px; height: 100px;}
    or in the HTML itself:

    Code:
    <img width="100" height="100" src="">

  3. #3
    SitePoint Addict tom8's Avatar
    Join Date
    Mar 2012
    Location
    New Jersey
    Posts
    310
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I came up with similar solution but Ralph beat me to it.

    Here is my:
    PHP Code:
    <!DOCTYPE HTML>
    <
    html>
    <
    style type="text/css">
       
    div 
           
    height:300px
           
    width:300px}
       
    img 
           
    height:100%;
           
    width:100%}
    </
    style>
    <
    body>
    <
    div>
       <
    img src="myPicture.jpg" alt="myPicture"/>
    </
    div>
    </
    body>
    </
    html
    However, you will notice that the image will be distorted if the height and width ration are not the same as div. Suggestion anyone?

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,151
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Apply the image as a background and use background-size: contain. Otherwise, you will need to use JavaScript which can get messy.
    The only code I hate more than my own is everyone else's.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Apply the image as a background and use background-size: contain.
    if the images are being retrieved from a DB , then they are best used as CONTENT ... while it's not impossible to generate CSS and giving unique matching IDs for each div.. it just to convoluted to be useful.

    I would suggest targeting the IMG tag ( as was mentioned before)

    img {height:100%; width:100%:} or even better:
    img {height:100%; max-width:100%;} or img {width:100%; max-height:100%; } the idea behind the latter two option is to prevent distortion in case the aspect ratio is not 1:1

  6. #6
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Many thanks,

    img {
    height:100%;
    width:100%}

    This works perfectly in IE and Firexfox but look completely messy in Google Chrome.

    How do I set the image as background?

  7. #7
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Well it works in Google Chrome if I fix the height of the div in pixels but I dont really want to do this.

  8. #8
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Apologies Dresden, do you mean I should just set the image height in the DIV I am inserting the image into.

    Google Chrome seems to dislike this and wont set the image to 100% high unless the div has a height.

  9. #9
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,151
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    if the images are being retrieved from a DB , then they are best used as CONTENT ... while it's not impossible to generate CSS and giving unique matching IDs for each div.. it just to convoluted to be useful.

    I would suggest targeting the IMG tag ( as was mentioned before)

    img {height:100%; width:100%:} or even better:
    img {height:100%; max-width:100%;} or img {width:100%; max-height:100%; } the idea behind the latter two option is to prevent distortion in case the aspect ratio is not 1:1

    That won't work if images have different orientations, dimensions and aspect ratios.
    The only code I hate more than my own is everyone else's.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by justlukeyou View Post
    The images which are tall are over shooting the height of the DIV.
    The div really should expand to fit the image, unless you've restricted it with CSS. What do you mean by "over shooting"?

  11. #11
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I have set the DIV height to 300px which cross-browser appears to work best.

    Lets say I have 5 images at 250px high these will fit inside the DIV. However if I have 5 images at 350px high the image is taller than the DIV so it goes over the border of the DIV.

    If the image is 250px and I increase the DIV height to 360px then in some browsers their is a huge gap at the bottom.

    If I fix the height of the image to height: 100% it works perfectly in IE and Firefox. However in Chrome it squashes the image to just a few pixels if the height of the DIV is not fixed elsewhere on the site.

    For example the logo will squash up. But I cant do this because different browsers treat the height differently.

    It just seems catch-22.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Why not set the height of the div to 350px and the height of the image to 350px?

  13. #13
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    if the height of the DIV is not fixed elsewhere on the site.
    are you using a CLASS to target the div in question?

    the css should not be DIV IMG{}, but something like : .myClass IMG{} or even div.myClass IMG{} as far as the extra pixels in Chrome goes am not entirely sure on this, but it may have to do with how images are aligned. Try adding vertical-align:top | bottom| middle see if that changes anything.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •