Jquery image scale
- Started
- Last post
- 9 Responses
- JamesBoynton
Hi all
I am looking to find some jquery that can help me scale the height of an image with the browser height. Not really looking for full page examples or background image usage.
couple of examples below
http://www.graphicthoughtfacilit…
http://apracticeforeverydaylife.…Any help appreciated, i suspect i'm just not searching using the right terms in Google
- jpm0
var mywindow = $(window),
windowWidth = mywindow.width(),
windowHeight = mywindow.height()mywindow.resize(function() {
$("#your-image").css({height:win...
});
- dbloc0
you want it to scale keeping the aspect ratio and fill the div?
easiest way is to make them background images
- jpm0
^ If you setup the width css to auto, any change to height will keep proportions. Just realized the my post is cutted (...)
- yes but that will not keep the dive filled with imagedbloc
- div (not dive)dbloc
- He ddidn't request that, at least not literally.jpm
- Yeah it's not a div filled, just want the height of the image to change as height changesJamesBoynton
- In the same way that in a responsive site the width changes with the browser window width.JamesBoynton
- hotroddy0
*/ to maintain aspect ratio
var scale = 1;
var imageWidth = srcImg.getAttribute('width');
var imageHeight = srcImg.getAttribute('height');
scale = windowH / imageHeight;imageHeight = imageHeight * scale;
imageWidth = imageWidth * scale;$("#img").css("height", imageHeight);
$("#img").css("width", imageWidth);
- dbloc0
try this.
http://jsfiddle.net/
- jpm0
As said, once width or height is set to auto, modifying other css value on js will keep the aspect ratio.
- Image becomes massive on iOS? Will check desktop tomorrowJamesBoynton
- JamesBoynton0
Excellent, will go through the links and hopefully finally get my own site live! Only been in progress since 2007
- You always hurt the ones you love bud; in this case yourself and your career. Get 'er done! ; )ideaist