jQuery resize
- Started
- Last post
- 10 Responses
- Nathan_Adams0
You don't need jQuery for that.
img {width:100%; height:auto; min-width:100px; max-width:800px;}
And if you want that relative to a container div rather than the page, make the container div position:relative;
- kalkal0
Will this work with tables? I'm modding a rather nice wordpress theme that the designer oddly decided to use a table layout the images inside.
Maybe it was laziness. I tried using percentages with CSS and the images scale, the padding between them doesn't change though. Also, the images only scale when the page is rendered, after that, a resize doesn't change the image sizes...
- kalkal0
Oh and when I say the padding doesn't change, I mean, all of the images overlap due to this problem.
- kalkal0
Thanks Nathan_Adams and albums.
Well I've overcome the table problem, I changed everything to divs and the corresponding css.
The problem I face now is, although the images scale exactly how I want, the are on top of each other when I want them to display horizontally. They're already in a unsorted list if that helps any. The container div seems to be forcing them to display like this but I don't know what css to use to allow that div to inherit the width of the contents :/
- kalkal0
Ok, that's fancy! If I can't get it to work with this, I simply give up!
- Nathan_Adams0
You want them all to continue going inline so everything scrolls horizontally? The css you're looking for is:
#container {white-space:nowrap;}
#container img {display:inline-block; height:100%; width:auto; margin-right:whatever}*caution: <= ie7 hates inline-block, but who gives a shit about <= ie7.
- Nathan_Adams0
You're other option is to float each image to the left, and then use javascript to calculate the width of each image, add them together, and make the container that wide. But that's unnecessary.