Jump to content

How to resize images with the browser window?


klotho

Recommended Posts

Hope I have posted this in the correct topic...Hi, I'm making a portfolio layout with images in a list (grid view), and I’m working with an fixed-fluid width on my #wrapper (max-width: 1075px; min-width: 960px; ). This works fine as long as I’m showing full width, but when I’m resizing the browser window the img thumbs floats down an leave a gap on the right side (the <li> is set to float:left; ) (as well as it should). But this is not the effect I’m after, I want the img thumbs to resize with the browser window, and I have managed to do that width CSS (example: width: 28.1%; ). But I want a hover effect with text over the images (and that makes a mess out of % ), so now I’m looking for a script that can do the resizing for me because I can't use % on the image if I want that effect; and that I DO!So do anybody knows about a script that can help me with my problem?Specifics:I'm no wizard in .js so it would be fine if it is well documented on how to implement :PIt should be possible to direct to only img with a certain class (don't want all my images to go bananas when resizing :) )Maybe control image size in css?And of course keep correct image dimensions! I'm not sure if this matters but; this portfolio is going to be implemented in WordPress.I would bee very grateful for all help and tips on the matter, because this problem makes me kinda crazy :)!Also:I come over this gallery when I was searching after a solution, so here you can see an example on what I want (it also almost have the hover effect I want in mine), resize your browser window and see the effect: http://bestwebgallery.com/ I hope I have explained what I’m after clearly enough, my English (writing) is sadly not the best.Kind regards from a designer who isn’t crazy; yet!

Link to comment
Share on other sites

Hope I have posted this in the correct topic...Hi, I'm making a portfolio layout with images in a list (grid view), and I’m working with an fixed-fluid width on my #wrapper (max-width: 1075px; min-width: 960px; ). This works fine as long as I’m showing full width, but when I’m resizing the browser window the img thumbs floats down an leave a gap on the right side (the <li> is set to float:left; ) (as well as it should). But this is not the effect I’m after, I want the img thumbs to resize with the browser window, and I have managed to do that width CSS (example: width: 28.1%; ). But I want a hover effect with text over the images (and that makes a mess out of % ), so now I’m looking for a script that can do the resizing for me because I can't use % on the image if I want that effect; and that I DO!So do anybody knows about a script that can help me with my problem?Specifics:I'm no wizard in .js so it would be fine if it is well documented on how to implement :PIt should be possible to direct to only img with a certain class (don't want all my images to go bananas when resizing :) )Maybe control image size in css?And of course keep correct image dimensions! I'm not sure if this matters but; this portfolio is going to be implemented in WordPress.I would bee very grateful for all help and tips on the matter, because this problem makes me kinda crazy :)!Also:I come over this gallery when I was searching after a solution, so here you can see an example on what I want (it also almost have the hover effect I want in mine), resize your browser window and see the effect: http://bestwebgallery.com/ I hope I have explained what I’m after clearly enough, my English (writing) is sadly not the best.Kind regards from a designer who isn’t crazy; yet!
Set minimal sizes for your elements and then you wont have a problem when the screen is resized too much.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...