Responsive Height Proportional to Width

Responsive height proportional to width

Padding %

This can be achieved by giving the element height:0 and padding-bottom:30%.

In all browsers, when padding is specified in %, it's calculated relative to the parent element's width. This can be a very useful feature for Responsive Design.

JSFiddle Demo

In the demo, the blue box at the top of the page is a single div. The height is responsive, and it can contain a variable amount of inline content without increasing the height. It tested fine in IE7/8/9/10, Firefox, Chrome, Safari, and Opera.

.content {
    width: 100%;
    height: 0;
    padding-bottom: 30%;
}
...
<div class="content"></div>

Padding % and absolute position

If there are any problems with using a 0-height element, the demo also has a green box that's implemented using a wrapper element and absolute position. Not sure if there are any advantages to this approach.

.wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 30%;
}
.wrapper .content {
    position: absolute;
    width: 100%;
    height: 100%;
}
...
<div class="wrapper">
    <div class="content"></div>
</div>

CSS: make div width proportional to height

I've been wondering about a pure-css solution to this problem for a while. I finally came up with a solution using ems, which can be progressively enhanced using vws:

See codepen link for full working demo and explanation:

http://codepen.io/patrickkunka/pen/yxugb

Simplified version:

.parent {
  font-size: 250px; // height of container
  height: 1em;
}

.child {
  height: 100%;
  width: 1em; // 100% of height
}

Proportional image scale (width & height) to contain inside responsive DIV

I think using this would work best.

img {
  bottom: -5000px;
  left: -5000px;
  margin: auto;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  right: -5000px;
  top: -5000px;
}

Obviously setting position: relative; and overflow: hidden; on the parent div. This will position your image center no matter whats the size of the container.

Image will also contain its proportions.

https://jsfiddle.net/fnhropr3/6/

How to make a div's height proportional to its width?

Here's one hack that you can use: a quirk with CSS is that the top and bottom paddings/margins, when set to percentages, are computed based on the width of the parent element, not its height.

So, if you want a square div, which is, say, 50% the width of its parent element. To make it square, you simply set it's bottom padding to 50%, too.

The thing is that you have to adjust the padding percentage based on the div's width. If the div's width is set to 75% of parent, for example, to get a square you will need to use a bottom padding of 75%.

div {
    background-color: #eee;
    width: 50%;
    height: 0;
    margin-bottom: 40px;
}
.square {
    padding-bottom: 50%; /* (50%*1) */
}
.landscape {
    padding-bottom: 37.5%; /* (50%*(3/4)) */
}
.portrait {
    padding-bottom: 66.6667%; /* (50%*(4/3)) */
}

Here's a proof-of-concept fiddle: http://jsfiddle.net/teddyrised/Vsj33/

Make height responsive according to width in JavaScript

Here is my solution:

function App() {
  const store = useStore();
  const { win, browser, aspectRatio } = store;
  const pad = 50;

  const rectWidth = browser.width - pad;
  const rectHeight = rectWidth / aspectRatio;

  return (
    <div className="flex">
      <div id="sidebar">
        <h1 className="text">
          Center <span>papayawhip</span> Canvas
        </h1>
      </div>
      <Stage width={browser.width} height={browser.height} id="konva">
        <Layer>
          <Rect
            width={rectWidth}
            height={rectHeight}
            x={pad / 2}
            y={(win.height - rectHeight) / 2}
            fill="papayawhip"
          />
        </Layer>
      </Stage>
    </div>
  );
}

Also, I changed the store, so browser returns canvas area:

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

        return {
            width,
            height,
        }
}

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

I need script to resize the div height as proportional to width

For example, just add resize event listener and set height to elements:

var RATIO = 0.7;

$(window).on("resize", function() {
    $("#mydiv").height($("#mydiv").width() * RATIO);
});

https://jsfiddle.net/teu7vere/

---

Related Topics