SitePoint Sponsor

User Tag List

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

    Div holding a unknown width and height image

    I have a listing with images. The height of the images is unknown. What would be the best properties for the div. I have tried several things (overflow: hidden) but it won't show the images. This is what I have in the CSS:

    Code:
    .boxgrid {
     width: 150px;
     position:absolute;
     top:0;
     left:0;
     right:0;
     display: inline-block;
     margin: auto;
     overflow: hidden;
     background:#161613; 
    }
    
    .boxgrid img {
      max-width: 100%;
      height: auto;
      position: absolute; 
      top: 0; 
      left: 0; 
      border: 0; 
    }
    What am I doing wrong?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,059
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried a jQuery approach:
    Code:
    $(".boxgrid").height($(".art_photo").height());
    But that isn't working as you can see here
    And I prefer to use a CSS approach instead.

    Thank you in advance.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    perhaps you are going about this the wrong way.

    the reason the images wont show with overflow is that you container is collapsed when you AP the images, as the image container is taken out of the normal flow.

    I am assuming the reason you are APing the image is because you want that slide out effect. But since the image is the determining factor maybe that you should AP the text ( you might need a wrapper) instead?

  4. #4
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,059
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post

    the reason the images wont show with overflow is that you container is collapsed when you AP the images, as the image container is taken out of the normal flow.

    I am assuming the reason you are APing the image is because you want that slide out effect. But since the image is the determining factor maybe that you should AP the text ( you might need a wrapper) instead?
    Hi Dresden. I am not sure what ou mean with AP the images? English is not my main language. How would you approach this?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    AP= position: absolute;

    when you give position absolute to an element it get taken out of the normal flow ( it also gets given display:block; so even declaring display:inline-block; is no use). if you want the size of you container (.boxgrid ) to be depended on the size of the image you MUST remove position absolute from .boxgrid img

  6. #6
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,059
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Dresden. Thanks for the explanation. I have them positioned absolute because I wanted the add to cart buttons lined up neatly under the images (see this post) What would be the best approach to get both things right? I mean the container divs to stretch depending on the height of the images and the add to cart buttons still being lined up neatly.

    Thank you in advance!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    the problem is that you have to sacrifice something. If you knew the height of your text (buttons), you could make space (using padding) and then AP the buttons. But I think that want an acceptable answer before.

    To be hone , having been a fine artist, and working on a cart where images are almost more important than text descriptions, I would handle two whole CONCEPT differently.

    Creating a grid FIXED height/width containers and then AP the image at the top and the button at the bottom. Images dont change dimensions, so the only thing you'd need to be concered about would be long lines of the in the button, which again is unlikely.


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
  •