JavaScript resize image to aspect ratio

Question

I want to resize an image with lets say 980:1000 to an aspect ratio of 1:1, or an Image with 1500:900 to 16:9. How can I do that ? I only want Images to get smaller so they dont get stretched (980:1000 to for example 980:980).

score 0 · Answer 1 · answered Apr 27 '14 at 19:33

Is this in a browser? The easiest method is probably using background-size:cover.

http://css-tricks.com/perfect-full-page-background-image/

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

Why not use CSS?

To Responsive Image:

img {
    max-width: 100%;
    height: auto;
}

_

>StackOverflow question (JSFiddle)

>Another tricks

>Rundown of Handling Flexible Media

>Why Responsive Images Is So Hard

edited May 23 '17 at 12:14

Community

1
1

answered Apr 27 '14 at 19:35

rafaeldefazio

449
2
7

score 0 · Answer 3 · answered Apr 27 '14 at 19:38

You can do this by placing the image inside a wrapper element and giving the size to wrapper and overflow property to hidden so that image appears to be cropped yet its not stretched.

<div style="overflow:hidden; height:980px; width: 980px;" > <img src="img_1000x980.jpg" /> </div>

JavaScript resize image to aspect ratio

3 Answers3