SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to resize images with the browser window?

    Hi, I'm making a portfolio layout with images in a list (grid view), and I知 working with an fixed-fluid width on my #wrapper (max-width: 1075px; min-width: 960px; ). This works fine as long as I知 showing full width, but when I知 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知 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知 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
    • It 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 to), resize your browser window and see the effect: http://bestwebgallery.com

    I hope I have explained what I知 after clearly enough, my English (writing) is sadly not the best.

    Kind regard from a designer who isn稚 crazy (yet)!
    Last edited by Mittineague; Sep 2, 2011 at 09:26. Reason: OP forgot to turn off auto-title

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Have you tried setting the 28% width on the image containers and then setting the image width to 100%, if you then also set the container to be position:relative; you should be able to absolutely position your hover text.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    Have you tried setting the 28% width on the image containers and then setting the image width to 100%, if you then also set the container to be position:relative; you should be able to absolutely position your hover text.
    Hi, thanks for answering

    I think it is one of the methods I have tried, but I have tried so many things that I知 not quite sure, shall give it a try again and see whats happening...


  4. #4
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works, now the portfolio works perfectly THAN YOU!!!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •