Image Resize to Fit Properly

Hai All,

WE mostly found some situations in Programming that we see images in stretched format if the user is uploading a different type of image to the program.We can handle either with css or with JavaScript or other methods also, here I am showing css and the JavaScript to show that.

<div style="height: 100px;width:200px">

      <img src="//url_to_the_image" style="max-height: 100%; max-width: 100%" />

</div>

here the image will fit into the container div properly by maintaining the aspect ratio.
Other method is that we can get the desired aspect ratio width and height by using the following JavaScript function

function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

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

    return { width: srcWidth*ratio, height: srcHeight*ratio };

  }

thank you

SHARE

Gibin Francis

Hi. I’m Software Engineer in India. I’m Web Developer, Creative Coder, Web Designer, logo Designer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Designer. Inspired to make things looks better and Do the this in the best way.

• 
• 
• 
• 
•