Scale an image to fit some maximum dimension using vanilla JavaScript code
Multi tool use
Clash Royale CLAN TAG#URR8PPP
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;
up vote
5
down vote
favorite
Fill in the ? with a Javascript expression to set the scale ratio for
an image having a given height and width so that it fit inside a
maxdim-by-maxdim square area (touching at least two edges).function scaleImage(width, height, maxdim)
var scale = ?;
return [scale * width, scale * height];
Here is my solution:
function scaleImage(width, height, maxdim)
var scale = (width > height ? maxdim/width : maxdim/height);
return [scale * width, scale * height];
Is there a cleaner way of doing this?
javascript
edited May 11 at 21:47
200_success
123k14142399
migrated from stackoverflow.com May 11 at 20:12
This question came from our site for professional and enthusiast programmers.
add a comment |Â
up vote
5
down vote
favorite
Fill in the ? with a Javascript expression to set the scale ratio for
an image having a given height and width so that it fit inside a
maxdim-by-maxdim square area (touching at least two edges).function scaleImage(width, height, maxdim)
var scale = ?;
return [scale * width, scale * height];
Here is my solution:
function scaleImage(width, height, maxdim)
var scale = (width > height ? maxdim/width : maxdim/height);
return [scale * width, scale * height];
Is there a cleaner way of doing this?
javascript
edited May 11 at 21:47
200_success
123k14142399
migrated from stackoverflow.com May 11 at 20:12
This question came from our site for professional and enthusiast programmers.
6
Working code generally belongs on the code review stack exchange :)
– Dave Newton
May 10 at 19:39
CSS would be more efficient, unless you intend on intentionally stretching the image to larger than its natural aspect ratio.img max-height: 100%; max-width: 100%; height: auto; width: auto;
– jmcgriz
May 10 at 19:43
@Herohtar Can you make this the answer and I will mark it correct.
– Zzz
May 10 at 20:42
add a comment |Â
up vote
5
down vote
favorite
up vote
5
down vote
favorite
Fill in the ? with a Javascript expression to set the scale ratio for
an image having a given height and width so that it fit inside a
maxdim-by-maxdim square area (touching at least two edges).function scaleImage(width, height, maxdim)
var scale = ?;
return [scale * width, scale * height];
Here is my solution:
function scaleImage(width, height, maxdim)
var scale = (width > height ? maxdim/width : maxdim/height);
return [scale * width, scale * height];
Is there a cleaner way of doing this?
javascript
edited May 11 at 21:47
200_success
123k14142399
Fill in the ? with a Javascript expression to set the scale ratio for
an image having a given height and width so that it fit inside a
maxdim-by-maxdim square area (touching at least two edges).function scaleImage(width, height, maxdim)
var scale = ?;
return [scale * width, scale * height];
Here is my solution:
function scaleImage(width, height, maxdim)
var scale = (width > height ? maxdim/width : maxdim/height);
return [scale * width, scale * height];
Is there a cleaner way of doing this?
javascript
edited May 11 at 21:47
200_success
123k14142399
edited May 11 at 21:47
200_success
123k14142399
edited May 11 at 21:47
200_success
123k14142399
edited May 11 at 21:47
200_success
123k14142399
123k14142399
asked May 10 at 19:37
Zzz
migrated from stackoverflow.com May 11 at 20:12
This question came from our site for professional and enthusiast programmers.
migrated from stackoverflow.com May 11 at 20:12
This question came from our site for professional and enthusiast programmers.
6
Working code generally belongs on the code review stack exchange :)
– Dave Newton
May 10 at 19:39
CSS would be more efficient, unless you intend on intentionally stretching the image to larger than its natural aspect ratio.img max-height: 100%; max-width: 100%; height: auto; width: auto;
– jmcgriz
May 10 at 19:43
@Herohtar Can you make this the answer and I will mark it correct.
– Zzz
May 10 at 20:42
add a comment |Â
6
Working code generally belongs on the code review stack exchange :)
– Dave Newton
May 10 at 19:39
CSS would be more efficient, unless you intend on intentionally stretching the image to larger than its natural aspect ratio.img max-height: 100%; max-width: 100%; height: auto; width: auto;
– jmcgriz
May 10 at 19:43
@Herohtar Can you make this the answer and I will mark it correct.
– Zzz
May 10 at 20:42
6
6
Working code generally belongs on the code review stack exchange :)
– Dave Newton
May 10 at 19:39
Working code generally belongs on the code review stack exchange :)
– Dave Newton
May 10 at 19:39
CSS would be more efficient, unless you intend on intentionally stretching the image to larger than its natural aspect ratio.
img max-height: 100%; max-width: 100%; height: auto; width: auto; – jmcgriz
May 10 at 19:43
CSS would be more efficient, unless you intend on intentionally stretching the image to larger than its natural aspect ratio.
img max-height: 100%; max-width: 100%; height: auto; width: auto; – jmcgriz
May 10 at 19:43
@Herohtar Can you make this the answer and I will mark it correct.
– Zzz
May 10 at 20:42
@Herohtar Can you make this the answer and I will mark it correct.
– Zzz
May 10 at 20:42
add a comment |Â
1 Answer
1
active
oldest
votes
up vote
5
down vote
accepted
I would probably use Math.max(), as that seems more readable to me and would make what is happening more clear. However, I don't think it will affect efficiency in any meaningful way since it's still making a comparison to determine the max.
var scale = maxdim / Math.max(width, height);
answered May 10 at 20:59
Herohtar
1663
add a comment |Â
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
5
down vote
accepted
I would probably use Math.max(), as that seems more readable to me and would make what is happening more clear. However, I don't think it will affect efficiency in any meaningful way since it's still making a comparison to determine the max.
var scale = maxdim / Math.max(width, height);
answered May 10 at 20:59
Herohtar
1663
add a comment |Â
up vote
5
down vote
accepted
I would probably use Math.max(), as that seems more readable to me and would make what is happening more clear. However, I don't think it will affect efficiency in any meaningful way since it's still making a comparison to determine the max.
var scale = maxdim / Math.max(width, height);
answered May 10 at 20:59
Herohtar
1663
add a comment |Â
up vote
5
down vote
accepted
up vote
5
down vote
accepted
I would probably use Math.max(), as that seems more readable to me and would make what is happening more clear. However, I don't think it will affect efficiency in any meaningful way since it's still making a comparison to determine the max.
var scale = maxdim / Math.max(width, height);
answered May 10 at 20:59
Herohtar
1663
I would probably use Math.max(), as that seems more readable to me and would make what is happening more clear. However, I don't think it will affect efficiency in any meaningful way since it's still making a comparison to determine the max.
var scale = maxdim / Math.max(width, height);
answered May 10 at 20:59
Herohtar
1663
answered May 10 at 20:59
Herohtar
1663
answered May 10 at 20:59
Herohtar
1663
answered May 10 at 20:59
Herohtar
1663
1663
add a comment |Â
add a comment |Â
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f194226%2fscale-an-image-to-fit-some-maximum-dimension-using-vanilla-javascript-code%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
6
Working code generally belongs on the code review stack exchange :)
– Dave Newton
May 10 at 19:39
CSS would be more efficient, unless you intend on intentionally stretching the image to larger than its natural aspect ratio.
img max-height: 100%; max-width: 100%; height: auto; width: auto;– jmcgriz
May 10 at 19:43
@Herohtar Can you make this the answer and I will mark it correct.
– Zzz
May 10 at 20:42