[csswg-drafts] [css-values-4] Way to set height relative to width (#5461)

ferenci84 has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-values-4] Way to set height relative to width ==
### Problem descripion

So far the only way to alter the height relative to width is by using padding. But what if we want to set the max-height relative to width?

Consider this example:

HTML:

    <style>
        body {
            margin: 0;
        }
        .galery {
            display: flex;
            flex-flow: row wrap;
            align-items: stretch;
            width: 600px;
            margin: 0 auto;
        }
        .image {
            flex: 0 0 180px;
            margin: 10px;
            background: aqua;
            max-height: 180px;
        }
        img {
            height: 100%;
            width: 100%;
            display: block;
            object-position: center;
            object-fit: contain;
            border: 1px solid;
            box-sizing: border-box;
        }
    </style>
    <div class="galery">
        <div class="image">
            <img src="https://via.placeholder.com/1000x660" data-orientation="landscape"/>
        </div>
        <div class="image">
            <img src="https://via.placeholder.com/1000x660" data-orientation="landscape"/>
        </div>
        <div class="image">
            <img src="https://via.placeholder.com/1000x660" data-orientation="landscape"/>
        </div>
        <div class="image">
            <img src="https://via.placeholder.com/660x1000" data-orientation="portrait"/>
        </div>
        <div class="image">
            <img src="https://via.placeholder.com/1000x660" data-orientation="landscape"/>
        </div>
        <div class="image">
            <img src="https://via.placeholder.com/1000x660" data-orientation="landscape"/>
        </div>
    </div>

[live example](https://codepen.io/ferenci84/pen/zYqopPw)

Basically I want to avoid portrait images to be too large compared to landscape images, that's why I'm using max-height. But if the size of the container is not known, I'd have to use a complicated calc expression to get the value. Example:

        .galery {
            display: flex;
            flex-flow: row wrap;
            align-items: stretch;
            margin: 10px auto;
            padding: 0 10px;
            width: 50%;
        }
        .image {
            flex: 1 0 calc(33.333% - 20px);
            margin: 10px;
            background: aqua;
            max-height: calc((50vw - 20px) / 3 - 20px);
        }

[live example](https://codepen.io/ferenci84/pen/LYNbeze)

This max-height expression is quite complicated and fragile. It would be much cleaner and more direct to set the max-height to relative to width.

### Proposed one of possibly several viable solutions

There may be several possible solutions to this problem. One possible solution to this is the following:
A new unit added to CSS Values Level 4:
`cw` (stands for: containing block width) meaning: percentage of the [logical width](https://www.w3.org/TR/css-writing-modes-4/#logical-width) of containing block

This definition is similar to:
https://www.w3.org/TR/css-box-3/#padding-physical

### Example use case

Instead of the complicated calc expression:

    max-height: calc((100vw - 20px) / 3 - 20px);

I would just use a value relative to width:

    max-height: 100cw;



Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5461 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 21 August 2020 13:02:54 UTC