Jquery resizing image

Question

I d like to start a discussion about the image resizing using jQuery   That s my contribution  But I think I m far away from the solution  What about the cropping  Who can help me     document  ready function             story-small img   each function         var maxWidth   100     Max width for the image     var maxHeight   100        Max height for the image     var ratio   0      Used for aspect ratio     var width     this  width          Current image width     var height     this  height        Current image height         Check if the current width is larger than the max     if width  gt  maxWidth           ratio   maxWidth   width       get ratio for scaling image           this  css  width   maxWidth      Set new width           this  css  height   height   ratio       Scale height based on ratio         height   height   ratio        Reset height to match scaled image               Check if current height is larger than max     if height  gt  maxHeight           ratio   maxHeight   height     get ratio for scaling image           this  css  height   maxHeight        Set new height           this  css  width   width   ratio         Scale width based on ratio         width   width   ratio        Reset width to match scaled image

User · Answer

document  ready function           img   each function            var maxWidth   660          var ratio   0          var img     this            if img width    gt  maxWidth               ratio   img height     img width                img attr  width   maxWidth               img attr  height    maxWidth ratio                               that will do the magic trick for everyone using latest jquery  Be sure you set your selector right  I used    img   but that can be different in your case   This only works for landscape mode  But if you look at it  only a few things have to be done to set it to portrait  aka  if img height     maxHeight  stuff

User · Answer

CSS    imgMaxWidth       max-width 100px      height auto     imgMaxHeight       max-height 100px      width auto      HTML    lt img src  image jpg  class  imageToResize imgMaxHeight    gt    jQuery    lt script type  text javascript  gt  function onLoadF             imageToResize   each function             var imgWidth     this  width            if  imgWidth gt 100                  this  removeClass  imgMaxHeight   addClass  imgMaxWidth                        window onload   onLoadF   lt  script gt

User · Answer

And old post    bit still  Resizing is one thing  but it can leave resized images uncentered  and looking a bit unorganised  So I added a few lines to the original post to add a left margin to centralise any resized images       schs bonsai image slider image   each function         var maxWidth   787     Max width for the image     var maxHeight   480        Max height for the image     var ratio   0      Used for aspect ratio     var width     this  width          Current image width     var height     this  height        Current image height         Check if the current width is larger than the max     if width  gt  maxWidth                ratio   maxWidth   width       get ratio for scaling image           this  css  width   maxWidth      Set new width           this  css  height   height   ratio       Scale height based on ratio         height   height   ratio        Reset height to match scaled image         width   width   ratio        Reset width to match scaled image              Check if current height is larger than max     if height  gt  maxHeight                ratio   maxHeight   height     get ratio for scaling image           this  css  height   maxHeight        Set new height           this  css  width   width   ratio         Scale width based on ratio         width   width   ratio        Reset width to match scaled image         height   height   ratio        Reset height to match scaled image           var newwidth     this  width        var parentwidth   this  parent   width        var widthdiff  parentwidth-newwidth  2        this  css  margin-left  widthdiff

User · Answer

So much code here  but I think this is the best answer  function resize                 var input       picture                var maxWidth   300              var maxHeight   300              var width   input width                var height   input height                var ratioX    maxWidth   width               var ratioY    maxHeight   height               var ratio   Math min ratioX  ratioY                var newWidth     width   ratio               var newHeight    height   ratio               input css  width   newWidth               input css  height   newHeight

User · Answer

imgLiquid  a jQuery Plugin  seems to do what you ask   Demo  http   goo gl Wk8bU  JsFiddle example  http   jsfiddle net karacas 3CRx7  base    Javascript      function              imgLiquidFill   imgLiquid           fill  true          horizontalAlign   center           verticalAlign   top                   imgLiquidNoFill   imgLiquid           fill  false          horizontalAlign   center           verticalAlign   50                      Html                                            lt div class  boxSep   gt       lt div class  imgLiquidNoFill imgLiquid  style  width 250px  height 250px   gt           lt img alt    src  http   www juegostoystory net files image 2010 Toy Story 3 USLC12 Woody jpg   gt       lt  div gt   lt  div gt

User · Answer

A couple of suggestions    Make this a function where you can pass in a max or min size  rather than hard-coding it  that will make it more reusable If you use jQuery s  animate method  like  animate  width  maxWidth    it should scale the other dimension for you automatically

User · Answer

function           mhz-news-img img   each function         var maxWidth   320     Max width for the image     var maxHeight   200        Max height for the image     var maxratio maxHeight maxWidth      var width     this  width          Current image width     var height     this  height        Current image height     var curentratio height width         Check if the current width is larger than the max      if curentratio gt maxratio                ratio   maxWidth   width       get ratio for scaling image           this  css  width   maxWidth      Set new width           this  css  height   height  ratio      Scale height based on ratio           else                ratio   maxHeight   height     get ratio for scaling image           this  css  height   maxHeight        Set new height           this  css  width   width   ratio         Scale width based on ratio

User · Answer

Great Start   Here s what I came up with      img resize   each function          this  load function            var maxWidth     this  width       Max width for the image         var maxHeight     this  height         Max height for the image           this  css  width    auto   css  height    auto       Remove existing CSS           this  removeAttr  width   removeAttr  height       Remove HTML attributes         var width     this  width          Current image width         var height     this  height        Current image height          if width  gt  height                   Check if the current width is larger than the max             if width  gt  maxWidth                   var ratio   maxWidth   width       get ratio for scaling image                   this  css  width   maxWidth      Set new width                   this  css  height   height   ratio       Scale height based on ratio                 height   height   ratio        Reset height to match scaled image                         else                  Check if current height is larger than max             if height  gt  maxHeight                   var ratio   maxHeight   height     get ratio for scaling image                   this  css  height   maxHeight        Set new height                   this  css  width   width   ratio         Scale width based on ratio                 width   width   ratio      Reset width to match scaled image                                       This has the benefit of allowing you to specify both width and height while allowing the image to still scale proportionally

User · Answer

You need to recalculate width and height after first condition  Here is the code of entire script     document  ready function             story-small img   each function         var maxWidth   100     Max width for the image     var maxHeight   100        Max height for the image     var ratio   0      Used for aspect ratio     var width     this  width          Current image width     var height     this  height        Current image height         Check if the current width is larger than the max     if width  gt  maxWidth           ratio   maxWidth   width       get ratio for scaling image           this  css  width   maxWidth      Set new width           this  css  height   height   ratio       Scale height based on ratio         height   height   ratio        Reset height to match scaled image            var width     this  width          Current image width     var height     this  height        Current image height         Check if current height is larger than max     if height  gt  maxHeight           ratio   maxHeight   height     get ratio for scaling image           this  css  height   maxHeight        Set new height           this  css  width   width   ratio         Scale width based on ratio         width   width   ratio        Reset width to match scaled image

User · Answer

Modifying Aleksandar s answer to make it as jquery plugin and accepts maxwidth and maxheight as arguments  suggested by Nathan     fn resize   function maxWidth maxHeight    return this each function         var ratio   0      var width     this  width        var height     this  height        if width  gt  maxWidth           ratio   maxWidth   width            this  css  width   maxWidth             this  css  height   height   ratio           height   height   ratio            var width     this  width        var height     this  height        if height  gt  maxHeight           ratio   maxHeight   height            this  css  height   maxHeight             this  css  width   width   ratio           width   width   ratio                 Used as     imgClass   resize 300 50

User · Answer

You can resize image with this piece of code      var maxWidth   600         img   each function            var imageWidth     this  width          var imageHeight     this  height            if  imageWidth  gt  maxWidth              var percentdiff    imageWidth - maxWidth    imageWidth   100              this  width maxWidth               this  height imageHeight -  imageHeight   percentdiff   100

User · Answer

function             story-small img   each function             var maxWidth   100     Max width for the image         var maxHeight   100        Max height for the image         var width     this  width          Current image width         var height     this  height        Current image height            Check if the current width is larger than the max         if width gt height  amp  amp  width gt maxWidth                        ratio   maxWidth   width       get ratio for scaling image               this  css  width   maxWidth      Set new width               this  css  height   height   ratio      Scale height based on ratio                   else if height gt width  amp  amp  height gt maxHeight                        ratio   maxHeight   height     get ratio for scaling image               this  css  height   maxHeight        Set new height               this  css  width   width   ratio         Scale width based on ratio

User · Answer

function resize    resizeFrame elemento  margin      jQuery event add window   load   resize   jQuery event add window   resize   resize   function resizeFrame item  marge        item  each function       var m   marge 2    var mw     window  width  -m     var mh     window  height  -m    var w      img  this  width      var h      img  this  height      var mr   mh mw    var cr   h w       img  this  css  position  absolute  minWidth  w-w  20 minHeight  h-h  20 margin  auto  top  0  right  0  bottom  0  left  0  padding marge        if cr  lt  mr           var r   mw w             img  this  css  width  mw               img  this  css  height  h r         else if cr  gt  mr           var r   mh h             img  this  css  height  mh               img  this  css  width  w r

User · Answer

You can do this with the aeimageresize jquery plugin   https   plugins jquery com ae image resize  https   github com adeelejaz jquery-image-resize    function              resizeme    aeImageResize   height  250  width  250

[jquery] Jquery resizing image

Examples related to jquery

Examples related to image