How to resize images proportionally / keeping the aspect ratio?

user_414027 0
Viewed 347206

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.

Can someone point me to some code, or explain the logic?

resize image jquery javascript
20 Answers

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.

user_28030000

This issue can be solved by CSS.

.image{
 max-width:*px;
}
user_74112430

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>

user_52376140

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

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.

user_141982720
Related