0

I want to make a browser window like:

browser window image

I picked out this image from https://tailwindcss.com/

How do I make a responsive browser window that shrinks & grows when you resize the Chrome Browser's window in Canvas?

Note: I don't want to make the browser window's width equal to window.innerWidth. I want it to have size 1024*600 & maintain an aspect ratio of 16 / 9.

I can't figure out the math. I also can't use Maintain the aspect ratio of a div with CSS as there is no padding bottom to be used.

I even read https://css-tricks.com/aspect-ratio-boxes/ but it's not what I want.

I have width, height & aspectRatio & want to make a resposive rectangle without using padding-bottom.

deadcoder0904
  • 7,232
  • 12
  • 66
  • 163

1 Answers1

1

You could try adding width: 100% to the element.

Mateja
  • 271
  • 1
  • 11
  • i forgot to mention the browser window must not be equal to `window.innerWidth` but rather have `1024*600` browser size & an aspect ratio of `16 / 9`....that would've been simpler...i'll add this to the question thanks for the reminder :) – deadcoder0904 Dec 25 '20 at 08:56
  • Oh okay thanks, sorry I didn't understand you :( – Mateja Dec 25 '20 at 08:57