SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    resizing images w/jquery

    Hello just put this on the jquery site...but perhaps someone here knows...
    I have a div w/an image.
    when the user resized the brower I'd like to have that image change to a smaller one.
    I know i can use the css @ media query for background images/css but is there a way to do that for the images placed in the html's divs?
    thx
    D

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It's easy to change the display size of an image with CSS. So the issue then becomes one of image file size. Rather than complex solutions for serving up a different image, it's worth considering a different approach to serving up one single image. I like this approach:

    http://blog.netvlies.nl/design-inter...na-revolution/

    which basically serves up a single image (that is optimized for retina displays, too) but yet which has a very small file size. The basic idea is that you give the image large dimensions, but save the image at low quality, making for a very small file size. Via CSS and/or HTML, you then set the display size of the image to whatever you like. You get a sinle image that displays well in all situations with a very small file size. Wins all round.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    well i had originally tried this out w/css. & the @media query works but...I have a div (bootstrap...dont' hate me) but i think if it is an empty div then i have to set a width & height for the background image to show.

  4. #4
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    And I was thinking of changing the img size w/css as well. (percentage /width/height) but had been previously told it was bad practice?

  5. #5
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    because this works...& i like it...


    Code:
    @media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
    body {
    padding-right: 0px;
    padding-left: 0px;
    }
      	#logo img{
    		height:50%;
    		width:50%;
    	}
    
    }
    @media all and (max-width: 575px) and (min-width: 320px), (min-width: 1151px) {
    body {
    padding-right: 0px;
    padding-left: 0px;
    }
      	#logo img{
    		height:50%;
    		width:50%;
    	}
    
    }

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    had been previously told it was bad practice?
    Well, it's very common and seems to work fine. I know older browsers (i.e. IE) had trouble with it, but that's really a non-issue these days.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •