SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    make image responsive to parent <li>

    I'm working on a photo gallery which you can see here
    The problem I am having is that the portrait photographs not reduce in the same way as the landscape photographs relative to the parent when the browser window is reduced. I've tried it with CSS:
    Code:
    .gallery ul li {
       width: 33% !important;
       max-height: 125px;
       margin: 0;
      margin-top: 30px !important;
       float: left;
       text-align: center;
       list-style: none !important;
    }
    
    .gallery ul li img {
      max-width: 100%;
      height: auto;
    }
    All thumbnails have a same height of 125px, but due to the difference in width between the landscapes and the portraits, is this, understandably, not working. So I guess I need to use some kind of Javascript function to determine the width of each image in relation to the parent <li>. Can someone please help me because this s driving me insane
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi donboe,

    It seems your question was answered here: http://www.sitepoint.com/forums/show...ive-thumbnails
    Yay!

    I'`m gonna close this thread now, so that someone else doesn't put effort into solving a problem that has already been solved.
    If you need it reopened for any reason, just shoot me a PM.


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
  •