如何按比例调整图像大小/保持纵横比？

我有尺寸相当大的图像，我想用jQuery缩小它们，同时保持比例限制，即相同的纵横比。

有人能给我指出一些代码，或者解释一下逻辑吗？

351255 次浏览
小开
最佳答案

Have a look at this piece of code from http://ericjuden.com/2009/07/jquery-image-resize/

$(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
}
});
});
小开

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.

    <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>
小开 
$('#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
});
小开

There are 4 parameters to this problem

  1. current image width iX
  2. current image height iY
  3. target viewport width cX
  4. target viewport height cY

And there are 3 different conditional parameters

  1. cX > cY ?
  2. iX > cX ?
  3. iY > cY ?

solution

  1. Find the smaller side of the target view port F
  2. Find the larger side of the current view port L
  3. Find the factor of both F/L = factor
  4. Multiply both sides of the current port with the factor ie, fX = iX * factor; fY = iY * factor

that's all you need to do.

//Pseudo code




iX;//current width of image in the client
iY;//current height of image in the client
cX;//configured width
cY;//configured height
fX;//final width
fY;//final height


1. check if iX,iY,cX,cY values are >0 and all values are not empty or not junk


2. lE = iX > iY ? iX: iY; //long edge


3. if ( cX < cY )
then
4.      factor = cX/lE;
else
5.      factor = cY/lE;


6. fX = iX * factor ; fY = iY * factor ;

This is a mature forum, I am not giving you code for that :)

小开

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

$("#someimage").css({height:<some new height>})

and miraculously the image is resized to the new height and conserving the same ratio!

小开

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 max-width and max-height to 100%.

<div style="height: 100px">
<img src="http://www.getdigital.de/images/produkte/t4/t4_css_sucks2.jpg"
style="max-height: 100%; max-width: 100%">
</div>​

Here's the fiddle: http://jsfiddle.net/9EQ5c/

小开

I think this is a really cool method:

 /**
* 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 };
}
小开

This totally worked for me for a draggable item - aspectRatio:true

.appendTo(divwrapper).resizable({
aspectRatio: true,
handles: 'se',
stop: resizestop
})
小开

Without additional temp-vars or brackets.

    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;
}

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.

小开

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

Browser will take care of keeping aspect ratio intact.

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

You don't need any jQuery or javascript for this.

Supported by ie7+ and other browsers (http://caniuse.com/minmaxwh).

小开

After some trial and error I came to this solution:

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";
}
小开

In order to determine the aspect ratio, you need to have a ratio to aim for.

Height

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

Width

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

In this example I use 16:10 since this the typical monitor aspect ratio.

var ratio = (16/10);
var height = getHeight(300,ratio);
var width = getWidth(height,ratio);


console.log(height);
console.log(width);

Results from above would be 147 and 300

小开

This should work for images with all possible proportions

$(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
}
});
});
小开

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

http://jsbin.com/viqare

img{
max-width:200px;
/*Or define max-height*/
}
<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"/>

小开

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): http://spacecoastsports.com/wp-content/uploads/2014/06/sportsballs1.png. (I wasn't able to comment on it above due to lack of reputation points.)

  // 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 > 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 > 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);
}
}
小开

2 Steps:

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

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

小开

This issue can be solved by CSS.

.image{
max-width:*px;
}
小开

Resize to fit the container, get scale factor, scale down percentage control

 $(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);


});
        #Parent {
background-color: grey;
}


#Child {
background-color: red;
}

<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>

小开

Resizing an image to a certain percentage

// scale can be 0.40, 0.80, etc.
function imageScaler(originalHeight, originalWidth, scale) {
const scaledWidth = originalWidth * scale;
const scaledHeight = (originalHeight / originalWidth) * scaledWidth;
return [scaledHeight, scaledWidth];
}
小开

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 => 2448 ÷ 3264 =0.75 Now just check number which gives 0.75 on division. Like: for 16:9 => 9÷16 =0.5625 (wrong it is not 0.75) Now 4:3 =>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.


提交答案