blocks|key|899446|text|看看这段来自http://ericjuden.com/2009/07/jquery-image-resize/的代码|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|899447|$(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+>+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+>+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
++++++++}
++++});
});|code-block|syntax|javascript|899448|entityMap|0|LINK|mutability|MUTABLE|url|http://ericjuden.com/2009/07/jquery-image-resize/^0|6|1D|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Have a look at this piece of code from <a href="http://ericjuden.com/2009/07/jquery-image-resize/" rel="noreferrer">http://ericjuden.com/2009/07/jquery-image-resize/</a></p>

<pre><code>$(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
            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
        }
    });
});
</code></pre>


blocks|key|899489|text|如果图像是成比例的，则此代码将用图像填充包装器。如果图像不成比例，那么额外的宽度/高度将被裁剪。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|899490|++++<script+type="text/javascript">
++++++++$(function(){
++++++++++++$('#slider+img').each(function(){
++++++++++++++++var+ReqWidth+=+1000;+//+Max+width+for+the+image
++++++++++++++++var+ReqHeight+=+300;+//+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+>+height+&&+height+<+ReqHeight)+{

++++++++++++++++++++$(this).css("min-height",+ReqHeight);+//+Set+new+height
++++++++++++++++}
++++++++++++++++else+
++++++++++++++++++++if+(width+>+height+&&+width+<+ReqWidth)+{

++++++++++++++++++++++++$(this).css("min-width",+ReqWidth);+//+Set+new+width
++++++++++++++++++++}
++++++++++++++++++++else+
++++++++++++++++++++++++if+(width+>+height+&&+width+>+ReqWidth)+{

++++++++++++++++++++++++++++$(this).css("max-width",+ReqWidth);+//+Set+new+width
++++++++++++++++++++++++}
++++++++++++++++++++++++else+
++++++++++++++++++++++++++++(height+>+width+&&+width+<+ReqWidth)
++++++++++++++++{

++++++++++++++++++++$(this).css("min-width",+ReqWidth);+//+Set+new+width
++++++++++++++++}
++++++++++++});
++++++++});
++++</script>|code-block|syntax|javascript|899491|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If the image is proportionate then this code will fill the wrapper with image. If image is not in proportion then extra width/height will get cropped.</p>

<pre><code>    &lt;script type="text/javascript"&gt;
        $(function(){
            $('#slider img').each(function(){
                var ReqWidth = 1000; // Max width for the image
                var ReqHeight = 300; // 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; height &lt; ReqHeight) {

                    $(this).css("min-height", ReqHeight); // Set new height
                }
                else 
                    if (width &gt; height &amp;&amp; width &lt; ReqWidth) {

                        $(this).css("min-width", ReqWidth); // Set new width
                    }
                    else 
                        if (width &gt; height &amp;&amp; width &gt; ReqWidth) {

                            $(this).css("max-width", ReqWidth); // Set new width
                        }
                        else 
                            (height &gt; width &amp;&amp; width &lt; ReqWidth)
                {

                    $(this).css("min-width", ReqWidth); // Set new width
                }
            });
        });
    &lt;/script&gt;
</code></pre>


blocks|key|1114218|text|$('#productThumb+img').each(function()+{
++++var+maxWidth+=+140;+//+Max+width+for+the+image
++++var+maxHeight+=+140;++++//+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+>+height){
++++++++height+=+(+height+/+width+)+*+maxHeight;

++++}+else+if(height+>+width){
++++++++maxWidth+=+(width/height)*+maxWidth;
++++}
++++$(this).css("width",+maxWidth);+//+Set+new+width
++++$(this).css("height",+maxHeight);++//+Scale+height+based+on+ratio
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1114219|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$('#productThumb img').each(function() {
    var maxWidth = 140; // Max width for the image
    var maxHeight = 140;    // 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; height){
        height = ( height / width ) * maxHeight;

    } else if(height &gt; width){
        maxWidth = (width/height)* maxWidth;
    }
    $(this).css("width", maxWidth); // Set new width
    $(this).css("height", maxHeight);  // Scale height based on ratio
});
</code></pre>


blocks|key|899561|text|实际上，我刚刚遇到这个问题，我找到的解决方案非常简单和奇怪。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|899562|$("#someimage").css({height:<some+new+height>})|code-block|syntax|javascript|899563|神奇的是，图像被调整到了新的高度，并保持了相同的比例！|899564|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>actually i have just run into this problem and the solution I found was strangely simple and weird</p>

<pre><code>$("#someimage").css({height:&lt;some new height&gt;})
</code></pre>

<p>and miraculously the image is resized to the new height and conserving the same ratio!</p>


blocks|key|899621|text|如果我没理解错的话，你甚至不需要jQuery来做这件事。仅使用CSS就可以在客户端按比例缩小图像:只需将其max-width和max-height设置为100%25即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|899622|​|899623|<div+style="height:+100px">
++<img+src="http://www.getdigital.de/images/produkte/t4/t4_css_sucks2.jpg"+
++style="max-height:+100%25;+max-width:+100%25">
</div>​|code-block|syntax|javascript|899624|899625|这就是问题所在：http://jsfiddle.net/9EQ5c/|899626|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/9EQ5c/^0|1H|9|1R|A|24|4|0|0|0|0|8|Q|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|P|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

<p>If I understand the question correctly, you don't even need jQuery for this. Shrinking the image proportionally on the client can be done with CSS alone: just set its <code>max-width</code> and <code>max-height</code> to <code>100%</code>.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="height: 100px"&gt;
  &lt;img src="http://www.getdigital.de/images/produkte/t4/t4_css_sucks2.jpg" 
  style="max-height: 100%; max-width: 100%"&gt;
&lt;/div&gt;​</code></pre>
</div>
</div>
</p>
<p>Here's the fiddle: <a href="http://jsfiddle.net/9EQ5c/" rel="nofollow noreferrer">http://jsfiddle.net/9EQ5c/</a></p>


blocks|key|899671|text|我认为这是一个真正的cool+method|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|899672|+/**
++*+Conserve+aspect+ratio+of+the+original+region.+Useful+when+shrinking/enlarging
++*+images+to+fit+into+a+certain+area.
++*
++*+@param+{Number}+srcWidth+width+of+source+image
++*+@param+{Number}+srcHeight+height+of+source+image
++*+@param+{Number}+maxWidth+maximum+available+width
++*+@param+{Number}+maxHeight+maximum+available+height
++*+@return+{Object}+{+width,+height+}
++*/
function+calculateAspectRatioFit(srcWidth,+srcHeight,+maxWidth,+maxHeight)+{

++++var+ratio+=+Math.min(maxWidth+/+srcWidth,+maxHeight+/+srcHeight);

++++return+{+width:+srcWidth*ratio,+height:+srcHeight*ratio+};
+}|code-block|syntax|javascript|899673|entityMap|0|LINK|mutability|MUTABLE|url|http://opensourcehacker.com/2011/12/01/calculate-aspect-ratio-conserving-resize-for-images-in-javascript/^0|A|B|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>I think this is a really <a href="http://opensourcehacker.com/2011/12/01/calculate-aspect-ratio-conserving-resize-for-images-in-javascript/" rel="noreferrer">cool method</a>:</p>

<pre class="lang-js prettyprint-override"><code> /**
  * Conserve aspect ratio of the original region. Useful when shrinking/enlarging
  * images to fit into a certain area.
  *
  * @param {Number} srcWidth width of source image
  * @param {Number} srcHeight height of source image
  * @param {Number} maxWidth maximum available width
  * @param {Number} maxHeight maximum available height
  * @return {Object} { width, height }
  */
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

    var ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);

    return { width: srcWidth*ratio, height: srcHeight*ratio };
 }
</code></pre>


blocks|key|899718|text|这对我来说完全适用于可拖拽的项目--+aspectRatio:true|type|unstyled|depth|inlineStyleRanges|entityRanges|data|899719|.appendTo(divwrapper).resizable({
++++aspectRatio:+true,
++++handles:+'se',
++++stop:+resizestop+
})|code-block|syntax|javascript|899720|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This totally worked for me for a draggable item - aspectRatio:true</p>

<pre><code>.appendTo(divwrapper).resizable({
    aspectRatio: true,
    handles: 'se',
    stop: resizestop 
})
</code></pre>


blocks|key|1114479|text|不需要额外的临时变量或括号。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1114480|++++var+width=+$(this).width(),+height=+$(this).height()
++++++,+maxWidth=100,+maxHeight=+100;

++++if(width+>+maxWidth){
++++++height+=+Math.floor(+maxWidth+*+height+/+width+);
++++++width+=+maxWidth
++++++}
++++if(height+>+maxHeight){
++++++width+=+Math.floor(+maxHeight+*+width+/+height+);
++++++height+=+maxHeight;
++++++}|code-block|syntax|javascript|1114481|请记住:搜索引擎不喜欢它，如果宽度和高度属性不适合图像，但他们不知道JS。|1114482|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Without additional temp-vars or brackets.</p>

<pre><code>    var width= $(this).width(), height= $(this).height()
      , maxWidth=100, maxHeight= 100;

    if(width &gt; maxWidth){
      height = Math.floor( maxWidth * height / width );
      width = maxWidth
      }
    if(height &gt; maxHeight){
      width = Math.floor( maxHeight * width / height );
      height = maxHeight;
      }
</code></pre>

<p>Keep in Mind: Search engines don't like it, if width and height attribute does not fit the image, but they don't know JS. </p>


blocks|key|899827|text|<img+src="/path/to/pic.jpg"+style="max-width:XXXpx;+max-height:YYYpx;"+>有帮助吗？|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|899828|浏览器会注意保持长宽比不变。|899829|也就是说，当图像宽度大于高度时，max-width将生效，其高度将按比例计算。类似地，当高度大于宽度时，max-height将生效。|899830|为此，您不需要任何jQuery或javascript。|899831|受ie7%2B和其他浏览器(http://caniuse.com/minmaxwh)支持。|899832|entityMap|0|LINK|mutability|MUTABLE|url|http://caniuse.com/minmaxwh^0|0|20|0|0|G|9|1G|A|0|0|C|R|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|14|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|N|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|O|$P|$5|Q|R|S|E|$T|U]]]]

<p>Does <code>&lt;img src="/path/to/pic.jpg" style="max-width:XXXpx; max-height:YYYpx;" &gt;</code> help?</p>

<p>Browser will take care of keeping aspect ratio intact. </p>

<p>i.e <code>max-width</code> kicks in when image width is greater than height and its height will be calculated proportionally. Similarly <code>max-height</code> will be in effect when height is greater than width.</p>

<p>You don't need any jQuery or javascript for this.</p>

<p>Supported by ie7+ and other browsers (<a href="http://caniuse.com/minmaxwh" rel="nofollow">http://caniuse.com/minmaxwh</a>).</p>


blocks|key|899867|text|经过反复试验，我得出了这样的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|899868|function+center(img)+{
++++var+div+=+img.parentNode;
++++var+divW+=+parseInt(div.style.width);
++++var+divH+=+parseInt(div.style.height);
++++var+srcW+=+img.width;
++++var+srcH+=+img.height;
++++var+ratio+=+Math.min(divW/srcW,+divH/srcH);
++++var+newW+=+img.width+*+ratio;
++++var+newH+=+img.height+*+ratio;
++++img.style.width++=+newW+%2B+"px";
++++img.style.height+=+newH+%2B+"px";
++++img.style.marginTop+=+(divH-newH)/2+%2B+"px";
++++img.style.marginLeft+=+(divW-newW)/2+%2B+"px";
}|code-block|syntax|javascript|899869|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>After some trial and error I came to this solution:</p>

<pre><code>function center(img) {
    var div = img.parentNode;
    var divW = parseInt(div.style.width);
    var divH = parseInt(div.style.height);
    var srcW = img.width;
    var srcH = img.height;
    var ratio = Math.min(divW/srcW, divH/srcH);
    var newW = img.width * ratio;
    var newH = img.height * ratio;
    img.style.width  = newW + "px";
    img.style.height = newH + "px";
    img.style.marginTop = (divH-newH)/2 + "px";
    img.style.marginLeft = (divW-newW)/2 + "px";
}
</code></pre>


blocks|key|899973|text|为了确定aspect+ratio，您需要有一个要瞄准的比率。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|899974|​|899975|📷|atomic|899976|899977|function+getHeight(length,+ratio)+{
++var+height+=+((length)/(Math.sqrt((Math.pow(ratio,+2)%2B1))));
++return+Math.round(height);
}|code-block|syntax|javascript|899978|899979|899980|899981|function+getWidth(length,+ratio)+{
++var+width+=+((length)/(Math.sqrt((1)/(Math.pow(ratio,+2)%2B1))));
++return+Math.round(width);
}|899982|在本例中，我使用16:10，因为这是典型的显示器纵横比。|style|CODE|899983|var+ratio+=+(16/10);
var+height+=+getHeight(300,ratio);
var+width+=+getWidth(height,ratio);

console.log(height);
console.log(width);|899984|上面的结果是147和300|899985|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Aspect_ratio_%2528image%2529|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/3fa02660a2b7224fb0ea98d8d7543d72.gif|imageAlt|2|https://ask.qcloudimg.com/http-save/yehe-900000/45705be2b2507f890d7cf7d833dc0a36.gif^0|4|C|0|0|0|0|1|1|0|0|0|0|0|1|2|0|0|0|8|5|0|0|6|3|A|3|0^^$0|@$1|2|3|4|5|6|7|1H|8|@]|9|@$A|1I|B|1J|1|1K]]|C|$]]|$1|D|3|E|5|6|7|1L|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1M|8|@]|9|@$A|1N|B|1O|1|1P]]|C|$]]|$1|I|3|E|5|6|7|1Q|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|1R|8|@]|9|@]|C|$M|N]]|$1|O|3|E|5|6|7|1S|8|@]|9|@]|C|$]]|$1|P|3|G|5|H|7|1T|8|@]|9|@$A|1U|B|1V|1|1W]]|C|$]]|$1|Q|3|E|5|6|7|1X|8|@]|9|@]|C|$]]|$1|R|3|S|5|L|7|1Y|8|@]|9|@]|C|$M|N]]|$1|T|3|U|5|6|7|1Z|8|@$A|20|B|21|V|W]]|9|@]|C|$]]|$1|X|3|Y|5|L|7|22|8|@]|9|@]|C|$M|N]]|$1|Z|3|10|5|6|7|23|8|@$A|24|B|25|V|W]|$A|26|B|27|V|W]]|9|@]|C|$]]|$1|11|3|-4|5|6|7|28|8|@]|9|@]|C|$]]]|12|$13|$5|14|15|16|C|$17|18]]|19|$5|1A|15|1B|C|$1C|1D|1E|-4]]|1F|$5|1A|15|1B|C|$1C|1G|1E|-4]]]]

<p>In order to determine the <a href="http://en.wikipedia.org/wiki/Aspect_ratio_%28image%29" rel="noreferrer">aspect ratio</a>, you need to have a ratio to aim for. </p>

<p><img src="https://i.stack.imgur.com/J5AoP.gif" alt="Height"></p>

<pre><code>function getHeight(length, ratio) {
  var height = ((length)/(Math.sqrt((Math.pow(ratio, 2)+1))));
  return Math.round(height);
}
</code></pre>

<p><img src="https://i.stack.imgur.com/MPVDz.gif" alt="Width"></p>

<pre><code>function getWidth(length, ratio) {
  var width = ((length)/(Math.sqrt((1)/(Math.pow(ratio, 2)+1))));
  return Math.round(width);
}
</code></pre>

<p>In this example I use <code>16:10</code> since this the typical monitor aspect ratio.</p>

<pre><code>var ratio = (16/10);
var height = getHeight(300,ratio);
var width = getWidth(height,ratio);

console.log(height);
console.log(width);
</code></pre>

<p>Results from above would be <code>147</code> and <code>300</code></p>


blocks|key|1114774|text|这应该适用于具有所有可能比例的图像|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1114775|$(document).ready(function()+{
++++$('.list+img').each(function()+{
++++++++var+maxWidth+=+100;
++++++++var+maxHeight+=+100;
++++++++var+width+=+$(this).width();
++++++++var+height+=+$(this).height();
++++++++var+ratioW+=+maxWidth+/+width;++//+Width+ratio
++++++++var+ratioH+=+maxHeight+/+height;++//+Height+ratio

++++++++//+If+height+ratio+is+bigger+then+we+need+to+scale+height
++++++++if(ratioH+>+ratioW){
++++++++++++$(this).css("width",+maxWidth);
++++++++++++$(this).css("height",+height+*+ratioW);++//+Scale+height+according+to+width+ratio
++++++++}
++++++++else{+//+otherwise+we+scale+width
++++++++++++$(this).css("height",+maxHeight);
++++++++++++$(this).css("width",+height+*+ratioH);++//+according+to+height+ratio
++++++++}
++++});
});|code-block|syntax|javascript|1114776|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This should work for images with all possible proportions</p>

<pre><code>$(document).ready(function() {
    $('.list img').each(function() {
        var maxWidth = 100;
        var maxHeight = 100;
        var width = $(this).width();
        var height = $(this).height();
        var ratioW = maxWidth / width;  // Width ratio
        var ratioH = maxHeight / height;  // Height ratio

        // If height ratio is bigger then we need to scale height
        if(ratioH &gt; ratioW){
            $(this).css("width", maxWidth);
            $(this).css("height", height * ratioW);  // Scale height according to width ratio
        }
        else{ // otherwise we scale width
            $(this).css("height", maxHeight);
            $(this).css("width", height * ratioH);  // according to height ratio
        }
    });
});
</code></pre>


blocks|key|900086|text|调整大小可以使用CSS来实现(保持纵横比)。这是受Dan+Dascalescu的帖子启发而进一步简化的答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|900087|http://jsbin.com/viqare|offset|length|900088|​|900089|img{
+++++max-width:200px;
+/*Or+define+max-height*/
++}|code-block|syntax|javascript|900090|<img+src="http://e1.365dm.com/13/07/4-3/20/alastair-cook-ashes-profile_2967773.jpg"++alt="Alastair+Cook"+/>

<img+src="http://e1.365dm.com/13/07/4-3/20/usman-khawaja-australia-profile_2974601.jpg"+alt="Usman+Khawaja"/>|900091|900092|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|N|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|O|3|G|5|6|7|14|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|C]]]]

<p>The resize can be achieved(maintaining aspect ratio) using CSS. 
This is a further simplified answer inspired by Dan Dascalescu's post.</p>

<p><a href="http://jsbin.com/viqare" rel="nofollow">http://jsbin.com/viqare</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>img{
     max-width:200px;
 /*Or define max-height*/
  }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img src="http://e1.365dm.com/13/07/4-3/20/alastair-cook-ashes-profile_2967773.jpg"  alt="Alastair Cook" /&gt;

&lt;img src="http://e1.365dm.com/13/07/4-3/20/usman-khawaja-australia-profile_2974601.jpg" alt="Usman Khawaja"/&gt;</code></pre>
</div>
</div>
</p>


blocks|key|900125|text|以下是对Mehdiway的答案的修正。新的宽度和/或高度未设置为最大值。一个好的测试用例如下(1768x1075像素)：http://spacecoastsports.com/wp-content/uploads/2014/06/sportsballs1.png。(由于缺乏名誉点，我无法在上面发表评论。)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|900126|++//+Make+sure+image+doesn't+exceed+100x100+pixels
++//+note:+takes+jQuery+img+object+not+HTML:+so+width+is+a+function
++//+not+a+property.
++function+resize_image+(image)+{
++++++var+maxWidth+=+100;+++++++++++//+Max+width+for+the+image
++++++var+maxHeight+=+100;++++++++++//+Max+height+for+the+image
++++++var+ratio+=+0;++++++++++++++++//+Used+for+aspect+ratio

++++++//+Get+current+dimensions
++++++var+width+=+image.width()
++++++var+height+=+image.height();+
++++++console.log("dimensions:+"+%2B+width+%2B+"x"+%2B+height);

++++++//+If+the+current+width+is+larger+than+the+max,+scale+height
++++++//+to+ratio+of+max+width+to+current+and+then+set+width+to+max.
++++++if+(width+>+maxWidth)+{
++++++++++console.log("Shrinking+width+(and+scaling+height)")
++++++++++ratio+=+maxWidth+/+width;
++++++++++height+=+height+*+ratio;
++++++++++width+=+maxWidth;
++++++++++image.css("width",+width);
++++++++++image.css("height",+height);
++++++++++console.log("new+dimensions:+"+%2B+width+%2B+"x"+%2B+height);
++++++}

++++++//+If+the+current+height+is+larger+than+the+max,+scale+width
++++++//+to+ratio+of+max+height+to+current+and+then+set+height+to+max.
++++++if+(height+>+maxHeight)+{
++++++++++console.log("Shrinking+height+(and+scaling+width)")
++++++++++ratio+=+maxHeight+/+height;
++++++++++width+=+width+*+ratio;
++++++++++height+=+maxHeight;
++++++++++image.css("width",+width);
++++++++++image.css("height",+height);
++++++++++console.log("new+dimensions:+"+%2B+width+%2B+"x"+%2B+height);
++++++}
++}|code-block|syntax|javascript|900127|entityMap|0|LINK|mutability|MUTABLE|url|http://spacecoastsports.com/wp-content/uploads/2014/06/sportsballs1.png^0|1O|1Z|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Here's a correction to Mehdiway's answer. The new width and/or height were not being set to the max value. A good test case is the following (1768 x 1075 pixels): <a href="http://spacecoastsports.com/wp-content/uploads/2014/06/sportsballs1.png" rel="nofollow noreferrer">http://spacecoastsports.com/wp-content/uploads/2014/06/sportsballs1.png</a>. (I wasn't able to comment on it above due to lack of reputation points.)</p>

<pre><code>  // Make sure image doesn't exceed 100x100 pixels
  // note: takes jQuery img object not HTML: so width is a function
  // not a property.
  function resize_image (image) {
      var maxWidth = 100;           // Max width for the image
      var maxHeight = 100;          // Max height for the image
      var ratio = 0;                // Used for aspect ratio

      // Get current dimensions
      var width = image.width()
      var height = image.height(); 
      console.log("dimensions: " + width + "x" + height);

      // If the current width is larger than the max, scale height
      // to ratio of max width to current and then set width to max.
      if (width &gt; maxWidth) {
          console.log("Shrinking width (and scaling height)")
          ratio = maxWidth / width;
          height = height * ratio;
          width = maxWidth;
          image.css("width", width);
          image.css("height", height);
          console.log("new dimensions: " + width + "x" + height);
      }

      // If the current height is larger than the max, scale width
      // to ratio of max height to current and then set height to max.
      if (height &gt; maxHeight) {
          console.log("Shrinking height (and scaling width)")
          ratio = maxHeight / height;
          width = width * ratio;
          height = maxHeight;
          image.css("width", width);
          image.css("height", height);
          console.log("new dimensions: " + width + "x" + height);
      }
  }
</code></pre>


blocks|key|900182|text|2个步骤：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|900183|步骤1)计算Image的原始宽度/原始高度的比例。|900184|步骤2)将original_+width+/original_height比值乘以新的期望高度，得到新的高度对应的新宽度。|900185|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>2 Steps:</p>

<p>Step 1) calculate the ratio of the original width / original height of Image.</p>

<p>Step 2) multiply the original_width/original_height ratio by the new desired height to get the new width corresponding to the new height.</p>


blocks|key|900205|text|这个问题可以通过CSS来解决。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|900206|.image{
+max-width:*px;
}|code-block|syntax|javascript|900207|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This issue can be solved by CSS.</p>

<pre><code>.image{
 max-width:*px;
}
</code></pre>


blocks|key|1115021|text|调整大小以适应容器，获得缩放因子，缩小百分比控制|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1115022|​|1115023|+$(function+()+{
++++++++++++let+ParentHeight+=+200;
++++++++++++let+ParentWidth+=+300;
++++++++++++$("#Parent").width(ParentWidth).height(ParentHeight);
++++++++++++$("#ParentHeight").html(ParentHeight);
++++++++++++$("#ParentWidth").html(ParentWidth);

++++++++++++var+RatioOfParent+=+ParentHeight+/+ParentWidth;
++++++++++++$("#ParentAspectRatio").html(RatioOfParent);

++++++++++++let+ChildHeight+=+2000;
++++++++++++let+ChildWidth+=+4000;
++++++++++++var+RatioOfChild+=+ChildHeight+/+ChildWidth;
++++++++++++$("#ChildAspectRatio").html(RatioOfChild);

++++++++++++let+ScaleHeight+=+ParentHeight+/+ChildHeight;
++++++++++++let+ScaleWidth+=+ParentWidth+/+ChildWidth;
++++++++++++let+Scale+=+Math.min(ScaleHeight,+ScaleWidth);

++++++++++++$("#ScaleFactor").html(Scale);
++++++++++++//+old+scale
++++++++++++//ChildHeight+=+ChildHeight+*+Scale;
++++++++++++//ChildWidth+=+ChildWidth+*+Scale;

++++++++++++//+reduce+scale+by+10%25,+you+can+change+the+percentage
++++++++++++let+ScaleDownPercentage+=+10;
++++++++++++let+CalculatedScaleValue+=+Scale+*+(ScaleDownPercentage+/+100);
++++++++++++$("#CalculatedScaleValue").html(CalculatedScaleValue);

++++++++++++//+new+scale
++++++++++++let+NewScale+=+(Scale+-+CalculatedScaleValue);
++++++++++++ChildHeight+=+ChildHeight+*+NewScale;
++++++++++++ChildWidth+=+ChildWidth+*+NewScale;

++++++++++++$("#Child").width(ChildWidth).height(ChildHeight);
++++++++++++$("#ChildHeight").html(ChildHeight);
++++++++++++$("#ChildWidth").html(ChildWidth);

++++++++});|code-block|syntax|javascript|1115024|++++++++#Parent+{
++++++++++++background-color:+grey;
++++++++}

++++++++#Child+{
++++++++++++background-color:+red;
++++++++}|1115025|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div+id="Parent">
++++<div+id="Child"></div>
</div>

<table>
++++<tr>
++++++++<td>Parent+Aspect+Ratio</td>
++++++++<td+id="ParentAspectRatio"></td>
++++</tr>
++++<tr>
++++++++<td>Child+Aspect+Ratio</td>
++++++++<td+id="ChildAspectRatio"></td>
++++</tr>
++++<tr>
++++++++<td>Scale+Factor</td>
++++++++<td+id="ScaleFactor"></td>
++++</tr>
++++<tr>
++++++++<td>Calculated+Scale+Value</td>
++++++++<td+id="CalculatedScaleValue"></td>
++++</tr>
++++<tr>
++++++++<td>Parent+Height</td>
++++++++<td+id="ParentHeight"></td>
++++</tr>
++++<tr>
++++++++<td>Parent+Width</td>
++++++++<td+id="ParentWidth"></td>
++++</tr>
++++<tr>
++++++++<td>Child+Height</td>
++++++++<td+id="ChildHeight"></td>
++++</tr>
++++<tr>
++++++++<td>Child+Width</td>
++++++++<td+id="ChildWidth"></td>
++++</tr>
</table>|1115026|1115027|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Resize to fit the container, get scale factor, scale down percentage control</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> $(function () {
            let ParentHeight = 200;
            let ParentWidth = 300;
            $("#Parent").width(ParentWidth).height(ParentHeight);
            $("#ParentHeight").html(ParentHeight);
            $("#ParentWidth").html(ParentWidth);

            var RatioOfParent = ParentHeight / ParentWidth;
            $("#ParentAspectRatio").html(RatioOfParent);

            let ChildHeight = 2000;
            let ChildWidth = 4000;
            var RatioOfChild = ChildHeight / ChildWidth;
            $("#ChildAspectRatio").html(RatioOfChild);

            let ScaleHeight = ParentHeight / ChildHeight;
            let ScaleWidth = ParentWidth / ChildWidth;
            let Scale = Math.min(ScaleHeight, ScaleWidth);

            $("#ScaleFactor").html(Scale);
            // old scale
            //ChildHeight = ChildHeight * Scale;
            //ChildWidth = ChildWidth * Scale;

            // reduce scale by 10%, you can change the percentage
            let ScaleDownPercentage = 10;
            let CalculatedScaleValue = Scale * (ScaleDownPercentage / 100);
            $("#CalculatedScaleValue").html(CalculatedScaleValue);

            // new scale
            let NewScale = (Scale - CalculatedScaleValue);
            ChildHeight = ChildHeight * NewScale;
            ChildWidth = ChildWidth * NewScale;

            $("#Child").width(ChildWidth).height(ChildHeight);
            $("#ChildHeight").html(ChildHeight);
            $("#ChildWidth").html(ChildWidth);

        });</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>        #Parent {
            background-color: grey;
        }

        #Child {
            background-color: red;
        }
 </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="Parent"&gt;
    &lt;div id="Child"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;table&gt;
    &lt;tr&gt;
        &lt;td&gt;Parent Aspect Ratio&lt;/td&gt;
        &lt;td id="ParentAspectRatio"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Child Aspect Ratio&lt;/td&gt;
        &lt;td id="ChildAspectRatio"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Scale Factor&lt;/td&gt;
        &lt;td id="ScaleFactor"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Calculated Scale Value&lt;/td&gt;
        &lt;td id="CalculatedScaleValue"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Parent Height&lt;/td&gt;
        &lt;td id="ParentHeight"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Parent Width&lt;/td&gt;
        &lt;td id="ParentWidth"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Child Height&lt;/td&gt;
        &lt;td id="ChildHeight"&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;Child Width&lt;/td&gt;
        &lt;td id="ChildWidth"&gt;&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


blocks|key|900344|text|你可以确定宽度高度，如果你想要一个特定的宽高比这样做，让你有一个3264×2448图片宽高比是=>+2448×3264+=0.75现在只要检查数字，给出0.75的除法。例如:对于16:9的=>+9÷16+=0.5625+(错的不是0.75)现在是4:3+=>3÷4=0.75+(我们明白了)所以原来的宽高比是4:3现在要调整图像的大小只需做Width=3264÷/×4+Height=2448÷/×3÷for+reducing×为了增加希望你可以自己理解和编码这是非常有效的，因为我们只需要做非常基本的算术只是简单的除法或乘法。如果我错了，请告诉我。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|900345|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>You can determine width height if you want a particular aspect ratio to do so,
Let you have a picture of 3264×2448
Pictures aspect ratio is =&gt; 2448 ÷ 3264 =0.75
Now just check number which gives 0.75 on division.
Like: for
16:9 =&gt; 9÷16 =0.5625 (wrong it is not 0.75)
Now 4:3 =&gt;3÷4=0.75 (we get it )
So the original aspect ratio is 4:3
now to resize the image just do
Width=3264 ÷/× 4
Height=2448 ÷/× 3
÷ for reducing
× for increasing
Hope you can understand and code yourself this is very effective because we just need to do very basic arithmetic just division or multiplication so simple.
Let me know if i am wrong.</p>


<p>I have images that will be quite big in dimension and I want to shrink them down with jQuery while keeping the proportions constrained, i.e. the same aspect ratio.</p>

<p>Can someone point me to some code, or explain the logic?</p>


How to resize images proportionally / keeping the aspect ratio?

容器

jQuery

我有一些尺寸相当大的图像，我想用jQuery缩小它们，同时保持比例限制，即相同的纵横比。有人能告诉我一些代码，或者解释一下其中的逻辑吗？

问如何按比例调整图像大小/保持宽高比？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何按比例调整图像大小/保持宽高比？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何按比例调整图像大小/保持宽高比？
EN