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:


.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?

I tried a jQuery approach:

$(".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.

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?

Hi Dresden. I am not sure what ou mean with AP the images? English is not my main language. How would you approach this?

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

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!

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.