SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Images are not being dispalyed in equal size

    Hi

    I have deployed four images in the front page of my website using the img tag, and specified the height and width, but they are not appearing as equal size.

    Is there a solution to this other than resizing the image which I know is better for the web browser as it takes less memory?

    Regards

    Yamin

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,599
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Could we see the page in question?

  3. #3
    SitePoint Zealot irishman's Avatar
    Join Date
    Dec 2011
    Location
    London
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Usually you only specify either the height or width, not both, and the image gets resized proportionally

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @ralph - its www.eyecatchersecurity.com - look at the four images below the main slideshow

    @irishman - well with the image tag I see a width and height parameter. You maybe right but I see everyone using both of them and not seen any documents where it says you may only use one.

    Regards

  5. #5
    SitePoint Zealot irishman's Avatar
    Join Date
    Dec 2011
    Location
    London
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Most of your images are using the image width as the setting, <img height="500" width="500" src="http://www.eyecatchersecurity.com/images/dvrs/GT904Hweb.jpg"> this one is 500 wide but only 192 high despite the 'height' you have set.
    As your thumbnail images are all resized from large images they are also quite big files. It may be worth creating thumbnail images of the height and width you want and then loading these in place of the ones you have at the moment. This would allow all your thumbnails to be of uniform size, smaller than currently, but ypur big images would still be how they are now.

  6. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,345
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by explorer07 View Post
    I have deployed four images in the front page of my website using the img tag, and specified the height and width, but they are not appearing as equal size.
    You have this in your CSS:
    Code CSS:
    img {
        border: medium none;
        height: auto;
        max-width: 100%;
    }
    The height: auto is over-riding the declared height on your images. Remove this and they will display at the sizes declared. Then you'll have a different problem, because the declared sizes do not scale proportionally to the original image, and your images will appear distorted.
    Quote Originally Posted by explorer07 View Post
    Is there a solution to this other than resizing the image which I know is better for the web browser as it takes less memory?
    If you need an image to appear in a 150px by 75px box, and the original image does not have a 2:1 aspect ratio (e.g. 400px x 200px) then I don't see you have much option but to edit the image. You could just declare the height and let the image scale, but in the case of the second one, that will leave you with a small square image instead.

    Quote Originally Posted by irishman View Post
    Usually you only specify either the height or width, not both, and the image gets resized proportionally
    irishman is referring to resizing images here. Ideally, you reduce the image to the size at which you want it to display and then declare both width and height.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi technobear

    Bingo, you have answered my curosity. I was wondering why only the width was set by the tag but the height was changing automatically. Makes sense.

    I guess I will create the thumbnail images of those size, that would be the best option I guess.

    Regards

  8. #8
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    5,345
    Mentioned
    214 Post(s)
    Tagged
    5 Thread(s)
    Glad I could help.
    Quote Originally Posted by explorer07 View Post
    I guess I will create the thumbnail images of those size, that would be the best option I guess.
    In my experience, there's nothing quite like doing things the right way to make sure they work.
    Don't be arrogant. Be kind to a koala that thinks it's a bear.


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
  •