Question

I’m trying to make slide down effect on some items, on hover the image will slide down and show the content, the problem is when you resize the browser the images resize too because I have

img { max-width: 100%; }

but the problem is I can’t have a fluid height too, I can’t use percentage height on them.
This is what’s happening:

http://codepen.io/joe/pen/yLjEx

I set the background as black to see what’s happening, and I currently have height 210px.

So how can fix this issue ?

Answer 1

I’ve come across this similar issue in my work. Unfortunately there is no clean solution with just CSS. You can use some javascript that will fire during the onresize event or you can add a placeholder image that is unseen and will keep the div‘s resizing in the correct ratio.

What I did was make the .desc positioned absolutely above a copy of the balloon image which “holds the the shape” of the div. You can use a transparent .png or just set the image to opacity:0.0; like in my codepen. See my example including the middle <li> which is scrollable.

Foreked codepen w/ auto-resize height and scrolling

Note: To work cross browser this would require more testing and possible use of IE’s filter to make the image transparent.