- From: Jake Archibald <jaffathecake@gmail.com>
- Date: Sun, 28 Feb 2016 09:45:10 +0000
- To: W3C CSS Mailing List <www-style@w3.org>
- Message-ID: <CAJ5xic_3r1JT3Rw65Gqf=XyvfNewAM2Cv4sDq=XKdj74WUKB0Q@mail.gmail.com>
I imagine this has been requested before, but couldn't find anything. I'm looking for a way to scale and position the contents of an element depending on the size of the element. The scaling would have no impact on the dimensions of the element, it would act like scale transforms on the children. If I were displaying a slide or a page of a document, I could use it to display the whole thing, regardless of parent element size. If a headline text was overflowing due to a long word that couldn't wrap, I could use it to scale the content down to stay within the parent. If I was dynamically loading part of a page (some share icons or *sigh* an advert), I could reserve a fixed area of the page and scale content down if it tries to overflow. This avoids the page shifting as content loads. The nearest things we have to this already are object-fit and SVG's viewBox. Rough proposal: view-box: <x offset> <y offset> <width> <height>; Default: view-box: 0 0 auto auto; x/y offset can be absolute, or "content", which is the offset of the top/left of the unioned child boxes. width/height can be absolute, "auto" which takes on the dimension of the element itself, or "contents" which takes the dimension from the union of the child boxes. Could we have max(auto, contents) here? view-box-position: <x> <y> <cover|contain>; Default: view-box-position: 0 0 contain; x/y is the alignment of the content within the element, like background-position. Cover|contain behaves like background-size. This is basically a CSS-friendly version of SVG's perserveAspectRatio, although I've lost the ability to not-preserve aspect ratio, so there may be a better solution. Auto-fitting a slide/document: .container { width: 200px; height: 100px; view-box: 0 0 content content; view-box-position: 50% 50% contain; } Scaling down an overflowing headline: .headline { view-box: 0 0 max(auto, content) auto; view-box-position: 0 100% contain; } If the headline overflows it would leave a gap at the top of the element, but the text would be fully visible. Is this worth pursuing?
Received on Sunday, 28 February 2016 09:45:50 UTC