- 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