Re: [csswg-drafts] [css-grid] Stretching image grid items in both dimensions

Ok, so Tab and I discussed this today and came up with the following 
conclusions.

Things to consider:
  1. Authors expect images to maintain their aspect ratio by default.
  2. The effective “intrinsic size” of an image in a given dimension, 
from an author's point of view, is affected by any sizing constraints 
placed on it in the other axis. Nowhere in CSS is the original size of
 the image, independent of those constraints, the output of any 
automatic sizing algorithm.
  3. `align-self` and `justify-self`  are defined to be alignment 
properties, not sizing properties.
  4. In any case, `align-self` and `justify-self` should *always* be 
able to perform their duty of assigning extra space in order to align 
the item within its container.

Reasoning:
  1. The previously-agreed solution of having `normal` do a 
stretch-while-preserving-aspect-ratio behavior violates classification
 #3 and requirement #4. (It introduces a different, non-trivial sizing
 behavior, and prevents the author from controlling the alignment in 
the axis that has leftover space.)
  2. In order to avoid these violations, `normal` must behave either 
exactly as `stretch` or exactly as `start`/`end`/`center` and not 
introduce a third sizing behavior. (It can however switch between the 
two based on some consideration.)
    
Proposal:

  `normal` behaves as `stretch` for things without an aspect ratio, 
and as `start` for things with an aspect ratio.
  * This keeps the behavior straightforward to reason about, and 
maintains the aspect ratio as expected.
  * By default images will take their intrinsic size, which is their 
standard behavior in CSS. This can be further controlled with the 
sizing properties (width/height and their min/max counterparts) and 
`object-fit` as usual.
  * The common responsive-design pattern of giving a large image 
`max-width: 100%; max-height: 100%` will work as desired here - aspect
 ratio is maintained, and it doesn't overflow the grid area.
  * The resulting grid item can be aligned with the alignment 
properties as expected.

Related improvements that need to be made:
  1. Fix <https://github.com/w3c/csswg-drafts/issues/794> to defer 
min-content/max-content sizing rules to match CSS2.1 results (as 
intended).
  2. Finish CSS Sizing 3 so that all of its values can be safely 
shipped.
  3. If possible, add a `size` shorthand to `width`/`height` to make 
it easier to specify various useful sizing behaviors such as 
`max-size: fill`, which would grant the desired sizing behavior 
expressed by Mats in this thread. (This is equivalent to the 
`max-width: 100%; max-height: 100%` paradigm, except it also works 
when margins/border/padding are specified.) 
<https://github.com/w3c/csswg-drafts/issues/820>


-- 
GitHub Notification of comment by fantasai
Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/523#issuecomment-268095890 
using your GitHub account

Received on Monday, 19 December 2016 22:22:40 UTC