Creating dynamic height based on width using JavaScript

Question

Creating dynamic height based on width using JavaScript

I'm trying to make a rectangle responsive based on the width of the window.

This is my current logic:

aspectRatio = 16 / 9
win = {
    width: window.innerWidth,
    height: window.innerHeight,
}

get browser() {
    const width = this.win.width - 250
    const height = width / this.aspectRatio

    return {
        width,
        height,
    }
}

To calculate the width, I subtract the sidebar width (250) from win.width.

For the height, I divide the width by the aspectRatio.

However, when the window size is reduced to around 700px, it results in a height of 0.

My application can be seen here:

https://i.stack.imgur.com/rqpVc.png

Demo →

CodeSandBox → https://codesandbox.io/s/add-padding-to-centered-canvas-with-sidebar-gqhhl

I want the papayawhip rectangle to be responsive. What algorithm should I use? I'm using Canvas with KonvaJS but the logic is written in JavaScript.

How can I make it responsive and maintain proportionality as the height shortens quickly?

javascript html css canvas konvajs

Answer 1

Answer №1

Below is the approach I took:

function App() {
  const storage = useStorage();
  const { victory, navigator, aspect } = storage;
  const offset = 50;

  const widthOfRect = navigator.width - offset;
  const heightOfRect = widthOfRect / aspect;

  return (
    <div className="flex">
      <div id="sidebar">
        <h1 className="text">
          Center <span>papayawhip</span> Canvas
        </h1>
      </div>
      <Stage width={navigator.width} height={navigator.height} id="konva">
        <Layer>
          <Rect
            width={widthOfRect}
            height={heightOfRect}
            x={offset / 2}
            y={(victory.height - heightOfRect) / 2}
            fill="papayawhip"
          />
        </Layer>
      </Stage>
    </div>
  );
}

Additionally, I updated the storage setup so that navigator gives back the canvas area:

get navigator() {
        const width = this.victory.width - 250
        const height = this.victory.height

        return {
            width,
            height,
        }
}

Demo: https://codesandbox.io/s/react-konva-responsive-canvas-ogk1n

Answer 2

Below is the approach I took:

function App() {
  const storage = useStorage();
  const { victory, navigator, aspect } = storage;
  const offset = 50;

  const widthOfRect = navigator.width - offset;
  const heightOfRect = widthOfRect / aspect;

  return (
    <div className="flex">
      <div id="sidebar">
        <h1 className="text">
          Center <span>papayawhip</span> Canvas
        </h1>
      </div>
      <Stage width={navigator.width} height={navigator.height} id="konva">
        <Layer>
          <Rect
            width={widthOfRect}
            height={heightOfRect}
            x={offset / 2}
            y={(victory.height - heightOfRect) / 2}
            fill="papayawhip"
          />
        </Layer>
      </Stage>
    </div>
  );
}

Additionally, I updated the storage setup so that navigator gives back the canvas area:

get navigator() {
        const width = this.victory.width - 250
        const height = this.victory.height

        return {
            width,
            height,
        }
}

Demo: https://codesandbox.io/s/react-konva-responsive-canvas-ogk1n

Answer 3

Answer №2

Initial Answer

width: 100%;
padding-top: 56.25%; /* Maintaining a 16:9 Aspect Ratio */

Alternative Approach

padding-top: calc(9 / 16 * 100%);

Answer 4

Initial Answer

width: 100%;
padding-top: 56.25%; /* Maintaining a 16:9 Aspect Ratio */

Alternative Approach

padding-top: calc(9 / 16 * 100%);

Answer 5

Answer №3

If you find yourself in a situation where you need to make CSS changes, but your component is buried 3 levels deep, don't worry! You can easily access the CSS file that is already imported next to your .tsx file.

To achieve this, simply add the following line of code at the end of your file:

import "./styles.css"

This trick, borrowed from @deadcoder's solution for resolving ratio issues, will ensure that your component displays correctly across different screen sizes. Take note of the responsive breakpoints provided below to maintain the aspect ratio and prevent shrinking to nothing.

canvas {
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

@media screen and (max-width: 1200px) {
    canvas {
      width: 100%;
      height: 400px;
      padding: 0; /* reset the ratio for smaller sizes so you can crop it */
    }
}
@media screen and (max-width: 600px) {
    canvas {
      width: 100%;
      height: 200px;
      padding: 0; /* reset the ratio for smaller sizes so you can crop it */
    }
}

Additionally, consider assigning an ID or class to the canvas element for easier targeting.

If you are still experiencing issues with the height disappearing too quickly, try using the entire area as the canvas or utilizing a background image instead.

Answer 6

If you find yourself in a situation where you need to make CSS changes, but your component is buried 3 levels deep, don't worry! You can easily access the CSS file that is already imported next to your .tsx file.

To achieve this, simply add the following line of code at the end of your file:

import "./styles.css"

This trick, borrowed from @deadcoder's solution for resolving ratio issues, will ensure that your component displays correctly across different screen sizes. Take note of the responsive breakpoints provided below to maintain the aspect ratio and prevent shrinking to nothing.

canvas {
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

@media screen and (max-width: 1200px) {
    canvas {
      width: 100%;
      height: 400px;
      padding: 0; /* reset the ratio for smaller sizes so you can crop it */
    }
}
@media screen and (max-width: 600px) {
    canvas {
      width: 100%;
      height: 200px;
      padding: 0; /* reset the ratio for smaller sizes so you can crop it */
    }
}

Additionally, consider assigning an ID or class to the canvas element for easier targeting.

If you are still experiencing issues with the height disappearing too quickly, try using the entire area as the canvas or utilizing a background image instead.

Creating dynamic height based on width using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Attempting to squeeze a lengthy word into a small span

Modifying form data when submitting a form

Utilizing React with Material UI, implement a Select component while disabling the scroll lock and ensuring the menu is positioned relative to

The production build encountered an error after upgrading Angular due to a problem with document.documentElement.setAttribute not being recognized

Configuring CORS in an Angular JS controller

Strategies for handling uncaught promise rejections within a Promise catch block

Encountering Rendering Issues with EJS Post HTML Conversion

Difficulty activating JavaScript function - unsure of proper implementation

Consistently encountering the error message "(0 , _reactDom.h) is not a function" or "h is not defined"

Switch between pages within a reactjs application by utilizing react router

Angular 7 three-dimensional model display technology

The JavaScript fetch API failed to receive a response after sending data via a 'POST' request to a Django server

Updating JQuery dropdown menu fills in additional form fields based on selection

Is this included in the total number of reads?

Improving React code by using conditional statements such as IF and Else

Using JQuery to create animations with fadeIn and fadeOut effects is a great way to

I'm having trouble getting my object to display using ng-repeat in Angular. Can anyone help me understand what I'm missing?

Utilize JavaScript's $.post function to export PHP $_POST data directly into a file

Encountering an error with $mdDialog.alert

Leverage the power of HTML, CSS, and Bootstrap within Visual Studio 2022 when developing with