Aspect ratio works only when when width is changed not for height

[slash851]

All works fine for width changes.
Could you extend the property to handle as well when the height is changed to adjust width - keeping the aspect ratio.

[tomhodgins]

Hi @slash851! I am not sure I'll modify this plugin, but we can create a new plugin fairly easily that will work for defining an aspect ratio to determine the width, based on the rendered height of an element:

<div class=width style=' --aspect-ratio: ["width", 16, 9]; '>Width-based</div>
<div class=height style=' --aspect-ratio: ["height", 16, 9]; '>Height-based</div>

<style>
  .width {
    min-width: 500px;
    height: var(--aspect-ratio);
    background-color: red;
  }
  .height {
    min-height: 500px;
    width: var(--aspect-ratio);
    background-color: blue;
  }
</style>

<script type=module>
  import computedVariables from 'https://unpkg.com/computed-variables/index.es.js'

  computedVariables(
    '--aspect-ratio',
    ([feature, w, h], event, tag) => {
      const features = {

        // Function for finding correct height
        width: tag => {
          tag.style.width = 'auto'
          const size = tag.offsetWidth / (w / h)
          tag.style.width = ''
          return size
        },

        // Function for finding correct width
        height: tag => {
          tag.style.height = 'auto'
          const size = tag.offsetHeight / (w / h)
          tag.style.height = ''
          return size
        }
      }

      // Return value as px unit
      return features[feature](tag) + 'px'
    }
  )
</script>

And the result:

This demo makes use of the computed-variables which is a lot more flexible than these CSSplus plugins.

There are a couple more demos for defining aspect ratios, these both work with widths, but based on the code above it should be easy to see how translate a width-based solution to a height-based one:

• https://codepen.io/tomhodgins/pen/oaKjQY using the syntax: --aspect-ratio: 1.777;
• https://codepen.io/tomhodgins/pen/GzZGXg using the syntax: --aspect-ratio: {"width": 16, "height": 9};

and the demo above we've used --aspect-ratio: ["height", 16, 9] so we can pass in the direction, width and height separately - but you also have flexibility to structure this however suits you - here are some other ideas:

• --aspect-ratio: {"height": {"width": 16, "height": 9}};
• --aspect-ratio: [16, 9];

The only thing to keep in mind when exploring these solutions with height instead of width, is that layout in the browser is width-based, so the height usually ends up fitting the content. If you want to set a width based on the height you may find yourself having to give elements a min-height or max-height to help give them a size from which the width can be calculated!

Good luck and let me know if you have any questions using these solutions :D