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

How to delete the final character from a file stream using node.js and the fs module

Having trouble getting CSS styles to work properly in conjunction with Javascript code

Utilize formData to upload an image to a database with ajax

The parseFloat function only considers numbers before the decimal point and disregards

Updating choices within a div in real-time by changing the select box dynamically

The equivalent of the $.curCSS method in jQuery version 1.10 is as follows:

The implementation of local JSON instead of external JSONP in Angular

How come useEffect runs only once even when multiple states in the dependency array of useEffect change simultaneously?

Is there a way to invoke a function in an iframe from its parent?

What is the best way to retrieve the "name" and "ObjectId" properties from this array of objects? (Using Mongoose and MongoDB)

What is causing the ESLint error when trying to use an async function that returns a Promise?

Integrating Material-UI Dialog with Material-table in ReactJS: A Step-by-Step Guide

Changed over to a promise-oriented database, causing my login feature to malfunction completely

What causes Chrome to crash when dealing with lengthy tail files?

Adding miscellaneous PHP scripts

What could be causing the resolve method to not send any data back to the controller?

Is it possible to incorporate varied icon images for every item in an unordered list?

Examining the version of a node module installed in the local environment and comparing it

Tips for utilizing dynamic variables when setting props in React Native styles

What is the process for fetching a specific image from a database folder by referencing its name?