- From: Joshua Baker <jtbaker@jtbaker.name>
- Date: Fri, 13 Jan 2017 08:47:05 -0800
- To: Oliver Joseph Ash <oliverjash@gmail.com>
- Cc: www-style@w3.org
- Message-ID: <CAMrnN-jTHkgsu=-R53sKPAOQr+hitv5Fo48vBF2joW4uogYSBw@mail.gmail.com>
Couldn't this be solved with `width` and `max-width`?
As in...
```
my-element {
width: 100vh;
max-width: 500px;
}
```
Demo: http://codepen.io/harbichidian/full/LxZzGR/
On Fri, Jan 13, 2017 at 6:21 AM, Oliver Joseph Ash <oliverjash@gmail.com>
wrote:
> I am aware that min/max functions have been specified before but were
> dropped, however I think there are still valid use cases for them with no
> acceptable workarounds. I noticed this thread from 2011 which proposed
> re-introducing them, but I don't see any follow up:
> https://www.w3.org/Style/CSS/Tracker/issues/203
>
> A personal use case of mine, but I'm sure there are many others: I want to
> display an element with a max-width of 100vh or some arbitrary pixel
> measurement, whichever is smallest. (This is for my photography blog,
> https://samefourchords.com/: images should stretch but appear no larger
> than the height of the viewport or the width of the image, whichever is
> smallest.)
>
> I'm able to achieve a similar effect to a min function by wrapping the
> element and using two max-widths:
>
> <div style="max-width: 100vh;">
> <my-element style="max-width: 500px;"></my-element>
> </div>
>
> Unfortunately this workaround means I cannot layout my element as easily
> (e.g. it is no longer a flex item, but a child of a flex item). display:
> contents won't help here because that would not honour the max-width, if I
> understand correctly.
>
Received on Friday, 13 January 2017 16:48:20 UTC