SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with Landscape & Portrait photos in image Gallery

    Hello all,

    I have an image gallery that is based on an image gallery at open designs.

    I can't figure out how to display both landcsape and portrait shots. The portrait shots render in the same proportions as the landscape ones ; ie distorted!

    I have tried adding different classes (ie: class="portrait") but that didn't work. I don't know if i'm just adding the classes to the wrong tags, or if i'm barking up the wrong tree altogether.

    I'v attached the relevant html and css files and a few images in the attached zip.

    If anyone has the time to take a look and advise i would really appreciate it.

    Thank you.
    Attached Files Attached Files

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Doozer,

    I didn't look at your code because I don't have time right now, but it seems that what you want is pretty simple: Don't apply width or height in your CSS or in your HTML. Then the images will just appear as they originally do. So if you have this in your HTML:

    Code:
    <img src="my_image.jpg" alt="My Image" width="100" height="100" />
    then change it to:

    Code:
    <img src="my_image.jpg" alt="My Image" />
    In your CSS you would just eliminate any WIDTH and HEIGHT values for the IMG tags.

    Hope that helps.

    Louis

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You are setting the size of the image here.

    Code:
    .thumbnail:hover span img { 
                    margin: 22px 0px 5px 0;
                    border: 2px solid #333;
                    height: 402px;
                    width: 600px;
                    }
    That means all hovered images will be at the size that you have set. If you want the image at its intrinsic size then you could try something like this instead.

    Code:
    .thumbnail:hover span img { 
                    margin: 22px 0px 5px 0;
                    border: 2px solid #333;
                    width:auto;
                    height:auto
                    }
    Your page wasn't really working well without all the images so I can't really test this properly.

  4. #4
    SitePoint Member
    Join Date
    Jul 2008
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi louis, and Paul

    Thank you both for your reply.

    Paul, your suggestion worked perfectly . Thank you very much! And thank you as well to loius for taking the time to reply. Much appreciated!

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2007
    Location
    Toronto
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, wouldn't "width/height: auto" be redundant? Wouldn't it be cleaner to just remove width and height altogether?

    Louis

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,282
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Wouldn't it be cleaner to just remove width and height altogether?
    In most cases yes you don't need them but the method used in the example above was to first resize the images to a thumbnail size.

    Code:
    .thumbnail img {
                    border: 2px solid #333;
                    margin: 0 0 20px 0;
                    width: 54px; height: 54px;
                    }
    Unfortunately that code was catching both the thumbnail and the enlarged image so I needed to counteract that first by using the autos (I could have changed the code so it tagetted more specifically but the other option was easier )

    (As a matter of interest it can cause problems in early versions of Firefox <2 if you don't have the height and width attributes in the image tag in the html. Firefox draws the page and then places the images incorrectly on first visit. Once they are cached it knows their size but n first visit it gets confused. Not a big problem these days as FF2+ is much more common than previous versions.)


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
  •