Jquery image scale
- Started
- Last post
- 9 Responses
- 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