0

I have the following Codepen:

  window.addEventListener('resize', function updateBox() {
  const maxWidth = window.innerWidth * 0.8
  const maxHeight = window.innerHeight * 0.8
  const width = 1024
  const height = 600
  const ratio = Math.min(maxWidth / width, maxHeight / height)
  const box = document.getElementById("box")
  console.log(`resize: ${width*ratio}*${height*ratio}`)
  box.style = `width: ${width * ratio}px;`
  box.style = `height: ${height * ratio}px;`
});

#box {
  width: 1024px;
  height: 600px;
  background-color: red;
}

<div id="box"></div>

This is pulled out of a popular question How to resize images proportionally / keeping the aspect ratio?. It is a very popular answer but it doesn't give the perfect aspect ratio.

As you can see if you resize the browser window, it looks weird. It does not maintain aspect ratio. It's some random calculation making the rectangle jump up in width & height.

I want an effect like https://codepen.io/chriscoyier/pen/BZNoev. Try resizing the browser to see the effect in action. The rectangle maintains its aspect ratio & stays in the center.

I can't use it unfortunately as it uses CSS padding-top so I can't use it. I need to use JS to achieve this as I will be using a Canvas library named Konva.

How do I do it?

deadcoder0904
  • 7,232
  • 12
  • 66
  • 163
  • The aspect ratio of an image is `width / height`. – Pointy Dec 25 '20 at 13:41
  • @Pointy i don't want to do it for image. i want it for a rectangle that is 1024*600. what would the math look like when i resize the browser? i really cant figure this out for the past week – deadcoder0904 Dec 25 '20 at 13:43
  • the ratio should always be a constant, in your case it's a variable – Temani Afif Dec 25 '20 at 13:46
  • 1024/600 is 1.70666. If your *actual* width is 500, then the height would be 500/1.70666, or about 293. If the actual width is 2000, then the height would be 2000/1.70666, or about 1172. – Pointy Dec 25 '20 at 13:50
  • also you don't need to use padding, there is a lot of other ways, ex: https://stackoverflow.com/a/53245657/8620333 – Temani Afif Dec 25 '20 at 13:50
  • @TemaniAfif got it about ratio. u mean i should turn it into 16/9 or something like that? i can't use grid or svg either as it's inside of a canvas. hence i need to figure it out in JS – deadcoder0904 Dec 25 '20 at 13:51
  • Compute the aspect ratio. Then if you know the width, the height is width/ratio. If you know the height, the width is height * ratio. – Pointy Dec 25 '20 at 13:53
  • @Pointy oh i think i got it. i'll have multiple widths [1024, 800, 600, 400] & i'll compute height of it using aspect ratio. is that what u mean? i think it could also use `window.innerWidth` & compute height automatically using aspectRatio – deadcoder0904 Dec 25 '20 at 13:55
  • Yes. And if you (for example) compute height from known width, and the height is greater than the actual available height, you can just do it the other way (compute width from available height). – Pointy Dec 25 '20 at 13:58
  • the issue with your code is that you need to get the new value of width/height each time you change them, not keep using the 1024/600 – Temani Afif Dec 25 '20 at 13:58
  • @TemaniAfif uhhh ... no. If the desired aspect ratio is 1024/600, that can be a constant. What has to be computed is *actual* height from *actual* width (or vice-versa). – Pointy Dec 25 '20 at 13:59
  • @Pointy Thank you so much. you've hit the issue perfectly. the height was increasing sometimes which was weird. thank you Temani as well. i got it :) – deadcoder0904 Dec 25 '20 at 13:59
  • and only ONE style attribute box.style = `width: ${width * ratio}px;height: ${height * ratio}px;` .. you are overriding the style each time – Temani Afif Dec 25 '20 at 14:03
  • @Pointy I meant more 1024, 600 .. it was not a fraction but the two values. I meant the he need to get each time the new width and height to perform the calculation of the min https://jsfiddle.net/n5gxjatk/ (probaby not mandatory at the end) – Temani Afif Dec 25 '20 at 14:06
  • thank u both i solved it..the issue was my code..i was overriding `width` with `width * 0.8` so i think those solutions might be working as well but i went with @Pointy's code as it's pretty simple `height = width / aspectRatio`. `width` i know & `aspectRatio` is fixed to `16 / 9` so it worked :) – deadcoder0904 Dec 25 '20 at 14:13

0 Answers0