Jump to content

How to resize images with the browser window?


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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...