Resizing images w/jquery

JavaScript
1

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

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-interactie/retina-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. :slight_smile:

3

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

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

because this works…& i like it…

@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

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.